Выкладываю "Label - Value" по центру без использования таблиц - PullRequest
Новая
       1

Выкладываю "Label - Value" по центру без использования таблиц

1 голос
/ 29 сентября 2010

Очень часто у вас будет несколько меток (давайте используем имя, возраст, цвет) и значение для каждого из них!

Если бы я поместил их в таблицу с двумя столбцами и тремя строками, я мог бы убедиться, чтоВсе значения (давайте используем Steve, 19, Red) начинаются в одной и той же горизонтальной позиции.

И если бы я хотел, чтобы этот столбец был выровнен по левому краю, и если я также хотел, выровнял столбец с меткой по правому краю.Тогда эти два столбца будут приятно встречаться в центре таблицы.

Как я могу сделать это без использования таблиц, но также без необходимости устанавливать фиксированную ширину!

Ответы [ 4 ]

2 голосов
/ 29 сентября 2010

Вы должны будете решить использовать метки фиксированной ширины (если вы идете по чистому маршруту CSS). Ниже приведен минимум, чтобы получить то, что вы пытаетесь достичь (взято из HTML Dog .)

CSS: 

label {
    clear: left;
    float: left;
    width: 7em; /* or whatever length suits */
    text-align: right;
}

HTML: 

<form>
    <div><label>Item 1</label><input /></div>
    <div><label>Item 2</label><input /></div>
    <div><label>Item 3</label><textarea></textarea></div>
</form>

Если вы абсолютно не хотите фиксированной ширины, то вы можете использовать этот JavaScript (сjQuery) и удалите фиксированную ширину из вышеуказанного CSS.Стоит отметить, что если вы включите людей с отключенным javascript, это будет выглядеть ужасно ! 

var largestWidth = 0;
$('label').each(
    function() {
        if ($(this).width() > largestWidth) {
            largestWidth = $(this).width();
        }
    });

$('label').each(
    function() {
        $(this).width(largestWidth);
    });

Я приведу живой пример на JSFiddle .

Учитывая приведенный вами вариант использования, я на самом деле думаю, что таблицы - лучший способ, но тогда у меня будет иное мнение по поводу дискуссии о таблицах / форматах, чем у большинства .

1 голос
/ 29 сентября 2010

Полагаю, вам нужен javascript, чтобы это исправить.Я не верю, что для этого есть простое решение CSS.

Действительно, работа с фиксированной шириной может быть проблемой при работе на мультиязычном сайте, где ширина меток может отличаться или где ширина может меняться в зависимости от браузеранастройки, такие как размер текста ...

0 голосов
/ 29 сентября 2010

Вы можете организовать это альтернативно, используя списки UL LI. 

<fieldset>

<legend>Sign-up Form</legend>
<form name="signup" action="index.html" method="post">
<ul> 
<li> <label for="name">Name</label>
<input type="text" name="name" id="name" size="30" />
</li> 
<li> <label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</li>



<li> <label for="psw">Password</label>
<input type="text" name="psw" id="psw" size="30" />
</li>



<li> <label for="free">Free Subscrition</label>
<input type="radio" name="subscription" id="free"/>
</li>

<li><label for="submit"></label>
<button type="submit" id="submit">Send</button> </li> 
<ul>
</form>

</fieldset>

css

fieldset ul, fieldset li{
border:0; margin:0; padding:0; list-style:none;
}
fieldset li{
clear:both;
list-style:none;
padding-bottom:10px;
}

fieldset input{
float:left;
}
fieldset label{
width:140px;  // or you give width in % here
float:left;
}
0 голосов
/ 29 сентября 2010

Я слышу, что вы говорите, но могу ли я напомнить вам, что таблицы подходят для табличных данных!

Но чтобы сделать это с помощью чистого CSS, вы можете переместить метку и значение влево, очистить впоследствии, иустановить оба элемента для отображения блока с шириной 50%.

...