Как я могу выровнять этот более длинный интервал с остальными?

#html #css

#HTML #css

Вопрос:

У меня есть эти пары имя / значение:

введите описание изображения здесь

Как вы уже заметили, значения name и state оба выровнены по правой стороне, но значение address начинается с новой строки.

Как я могу выровнять интервал, содержащий адрес, подобно остальным значениям (да, он длиннее, но он должен начинаться в той же строке с адресом и продолжаться в следующей)?

Стиль адреса:

 <div class="prop">
   <span class="name">Address</span>
   <span class="value">Women and Gynae Oncology Centre Mount Elizabeth Medical Centre Mount Elizabeth #17-14</span>
</div>

CSS для класса name:

 .name {
  vertical-align: top;
  font-weight: bold;
  width: 115px;
  float: left;
  padding: 5px;
  margin-top: 3px;
  clear: left;
}

CSS для класса значений:

 .value {
  float: left;
  padding: 5px;
}

У вас есть какие-нибудь идеи?

Спасибо.

ОБНОВЛЕНИЕ: После некоторых уточнений из ответа это выглядит лучше:

введите описание изображения здесь

Ответ №1:

 .prop {background: #eff9fe; overflow: auto;}
.name {float: left; width: 300px;}
.value {display: block; overflow: hidden; background: #e5f2f5;}

указание ширины .name поможет выровнять ваши «столбцы», overflow: hidden и отсутствие значения с плавающей точкой .value должно означать, что если длинный текст там нужно обернуть, он обернется только внутри себя, а не под «ключом»

Обновлено по комментариям

добавлено overflow:auto в контейнер div, поскольку он должен содержать дочерний элемент с плавающей точкой, float: left; width: 100%; также должно работать, если переполнение вызывает ненужные полосы прокрутки (в данном случае этого не должно быть, но вы знаете ..)

дальнейшее обновление, изменение выравнивания

 .prop {overflow: auto; padding: 10px 0;}
.value {display: block; overflow: hidden; background: #e5f2f5;}

.name {
  font-weight: bold;
  width: 115px;
  float: left;
}

1. Есть одна проблема. Имена теперь не всегда совпадают со значениями.. Например, state не выровнен по своему значению пары, потому что значение address’ заключено в несколько строк… Вы видите решение?

2. @Cristian .prop {overflow: auto;} — значение float должно содержаться.. извините, что пропустил это! также обновит ответ

3. @claresuzy Сейчас действительно лучше, но все еще немного не выровнено. Я прикрепил фотографию к своему вопросу. Заранее спасибо.

4. @claresuzy Извините, это сработает, если я удалю отступы и поля из name и добавлю padding-top в prop (для интервала между «строками». Еще раз спасибо.

5. удалите отступы и поля из левого поля с плавающей точкой и примените отступы к .prop div, это даст согласованные «промежутки» между верхом / низом каждой пары

Ответ №2:

Вот так:

 .prop {
    overflow:auto;
}

.value {
    float: right;
    width:350px;
}

Живая демонстрация: http://jsfiddle.net/simevidas/7L8kX/show /

1. не работает в IE7 и ниже — для них вы не можете переместить секунду вправо в исходном элементе — она опускается ниже левого содержимого

2. пожалуйста, я думаю, что все так или иначе пытаются забыть об IE6 / 7 :)

Ответ №3:

Похоже, у вас возникла проблема с переносом. Проблема не в диапазоне, его ваш div (или ваш экран) слишком мал, чтобы удерживать диапазон на одной строке, поэтому его перенос.

Какие у вас настройки для вашего класса prop css?