Подтвердить что ты не робот

CSS, как создать ширину ярлыка самого длинного содержащего текст?

У меня есть таблица с двумя столбцами, например:

Firstname: Jeff

Где первый столбец - это метка, а второй - вход. Теперь я устанавливаю ширину метки на 180 пикселей, но если у меня есть более крупный текст (одно слово больше 180 пикселей), оно не отображается полностью.

Я попытался установить в css ширину меток как "auto", но я не хочу разной ширины меток в том же столбце.

Результат будет выглядеть следующим образом:

Firstname:    Jeff
Enciclopedia: Yes
Town:         Tokyo

Как я могу разрешить это с помощью Css?

Большое спасибо,

Джефф

4b9b3361

ОТВЕТЫ

Ответ 1

Вы должны обернуть каждую комбинацию меток-ввод в элементе, а затем обернуть этот элемент в некоторый контейнер. Этот контейнер должен иметь min-width и display: inline-block;. Затем вы позволяете всем элементам ввода плавать вправо, и все готово.

Это приводит к очень простой, чистой и семантической разметке с eqaully чистым и поддерживаемым CSS, и никаких требований для JavaScript, jQuery и других причудливых вещей.

Вы можете сделать что-то вроде:

 <form>
     <fieldset>
         <p><label for="lorem">lorem</label><input type="text" id="lorem" /></p>
         <p><label for="ipsum">ipsum</label><input type="text" id="ipsum" /></p>
         <p><label for="li">li</label><input type="text" id="li" /></p>
     </fieldset>
 </form>

с помощью css

 fieldset {
     min-width: 100px;
     display: inline-block;
 }

 fieldset input{
     float: right;
 }

Здесь вы можете видеть, как это выглядит. Очевидно, вы можете стилизовать свою форму с полями, прокладками и т.д.

Кроме того, если вы хотите иметь оболочку, которая семантически более точна, вы можете использовать упорядоченный список. Затем вы можете создавать все, что хотите, и иметь даже приятную дополнительную оболочку (<ol>), которую вы можете использовать без добавления семантического мусора.

Пример:

 <form>
     <fieldset>
         <legend>First Example:</legend>
         <ol>
             <li><label for="lorem">lorem</label><input type="text" id="lorem" /></li>
             <li><label for="ipsum">ipsum</label><input type="password" id="ipsum" /></li>
             <li><label for="li">li</label><input type="text" id="li" /></li>
         </ol>
     </fieldset>

     <fieldset>
         <legend>Second Example:</legend>
         <ol>
             <li><label for="a">a</label><input type="text" id="a" /></li>
             <li><label for="b">b</label><input type="number" id="b" /></li>
             <li><label for="c">c</label><input type="range" id="c" /></li>
         </ol>
     </fieldset>

     <fieldset>
         <legend>Third Example:</legend>
         <ol>
             <li><label for="XXXXXXXX">XXXXXXXX</label><input type="email" id="XXXXXXXX" /></li>
             <li><label for="YYYYYYYYYYYY">YYYYYYYYYYYY</label><input type="search" id="YYYYYYYYYYYY" /></li>
             <li><label for="z">z</label><input type="text" id="z" /></li>
         </ol>
     </fieldset>
 </form>

в стиле

  fieldset {
     border: 1px solid silver;
     margin: 10px;
     padding: 10px;
     min-width: 100px;
     display: inline-block;
 }

 fieldset li{
     width: 100%;
     display: block;
     position: relative;
 }

 fieldset label{
     margin-right: 10px;
     position: relative;
 }

 fieldset label:after{
     content: ": ";
     position: absolute;
     right: -0.2em;
 }

 fieldset input{
     float: right;
 }

приведет к этому представлению. Вы можете даже поиграть с ним на этой скрипке: http://jsfiddle.net/ramsesoriginal/b6Taa/

EDIT, чтобы показать, как это добавляет разметку

Со следующим html:

 <form>
     <label for="lorem">lorem<input type="text" id="lorem" /></label>
     <label for="ipsum">ipsum<input type="text" id="ipsum" /></label>
     <label for="li">li<input type="text" id="li" /></label>
 </form>

и следующий CSS:

form{
    min-width: 100px;
    display: inline-block;
}

form input{
    float: right;
}

form label{
    display:block;
    margin-bottom: 2px;
}

Вы получаете эффект, который вы хотите. Вы можете поиграть с ним здесь. Но добавление <fieldsets> с <legend> не добавляет ненужной разметки, наоборот: оно помогает вам группировать входы. И добавление <ol> тоже семантически корректно, поскольку комбинации меток/ввода являются семантическими единицами, а форма представляет собой список полей, которые должны заполняться в логическом порядке.

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

EDIT2: вот как выглядит "реальная" форма регистрации с хорошей семантической разметкой:

 <form>
     <ol>
         <fieldset>
             <legend>Account</legend>
                 <li><label for="username">Username</label><input type="text" id="username" required  /></li>
                 <li><label for="password">Password</label><input type="password" id="password" required  /></li>
         </fieldset>

         <fieldset>
             <legend>Personal Data</legend>
                 <li><label for="name">Name</label><input type="text" id="name" /></li>
                 <li><label for="surname">Surname</label><input type="text" id="surname" /></li>
                 <li><label for="dob">Date of birth</label><input type="date" min="1900-01-01" max="2012-02-17" placeholder="YYYY-MM-DD" id="dob" /><span class="additionalInfo">Please input the date of birth in the following format: YYYY-MM-DD</span></li>
         </fieldset>

         <fieldset>
             <legend>Contact Information</legend>
                 <li><label for="email">E-mail</label><input type="email" id="email" required placeholder="[email protected]" /></li>
                 <li><label for="tel">Telephone number</label><input type="tel" id="tel" placeholder="(555) 555-5555"
              pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" /><span class="additionalInfo">Please input the telephone number in the following format: (555) 555-5555</span></li>
                 <li><label for="url">Website</label><input type="url" id ="url" placeholder="http://www.example.com"></li>
         </fieldset>

         <li><input type="submit" /></li>
     </ol>
 </form>

и стиль:

 fieldset {
     border: 1px solid silver;
     margin: 10px;
     padding: 10px;
     min-width: 100px;
     display: inline-block;
 }

 fieldset li{
     width: 100%;
     display: block;
     position: relative;
     margin-bottom: 2px;
 }

 fieldset label{
     margin-right: 10px;
     position: relative;
 }

 fieldset label:after{
     content: ": ";
     position: absolute;
     right: -0.2em;
 }

 fieldset input{
     float: right;
 }

 fieldset li .additionalInfo{
     position: absolute;
     padding: 5px;
     margin-top: 5px;
     display: none;
     background-color: white;
     border: 1px solid black;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     -webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
     box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
     z-index: 10;
 }

 fieldset li:hover .additionalInfo{
     display: block;
 }

Я включил некоторую дополнительную информацию, чтобы показать вам, как все это будет объединяться в один логический объект. Аналогичным образом вы можете включить ошибки и все, что вы хотите включить. Это просто быстрый пример, который я собрал вместе, но он должен показать, что вы можете достичь интересных вещей с помощью этой техники. Я также изменил то, что я положил <ol> прямо под форму, поэтому вам не нужно повторять ее для каждого набора полей. Я лично считаю это каким-то образом.. неудобным, но поскольку вы хотите иметь минимальную разметку, это будет работать очень хорошо и будет очень доступным. Снова прочитайте эту статью, если вы этого не сделали. Он дает некоторое представление о правильной маркировке формы.

О, и пример "реальной жизни" можно увидеть здесь: http://fiddle.jshell.net/ramsesoriginal/b6Taa/9/show/

И вы можете играть здесь: http://jsfiddle.net/ramsesoriginal/b6Taa/9/

EDIT: я обновил последний пример

В моем коде произошла ошибка. Элемент-обертка (<li> во втором и последнем примерах <label> в минимальном и <p> в первом должен иметь по крайней мере 1 пиксельный край внизу, или некоторые браузеры видят поля ввода как перекрывающиеся и не будут плавать их правильно. Я обновил последний пример, чтобы он работал там, везде, где вы должны помнить об этом.

Ответ 2

Самый простой способ - выбрать фиксированный размер достаточно большой.

Если вы действительно хотите симулировать точное поведение таблицы, у вас есть два варианта:

  • использовать таблицу

  • моделировать таблицу с помощью CSS:

    .block { display: table; }
.row   { display: table-row; }
label { display: table-cell; }

В следующем HTML:

<div class="block">
  <div class="row">
    <label>...</label><div class="value">...</div>
   </div>
   ...
</div>

Я не думаю, что существует другой способ справиться с этим. Если вы действительно не хотите менять свой HTML, ваша единственная надежда может заключаться в использовании javascript.

Ответ 3

простое решение заключалось бы в том, чтобы зафиксировать длину метки, которая могла бы разместить самую большую библиотеку (добавьте дополнительно 50px, чтобы вы могли ее центрировать) и используйте text-align:center

Здесь скрипка для того же.. http://jsfiddle.net/mvivekc/4P58S/

надеюсь, что это поможет.

Ответ 4

Установите минимальную ширину, которая является шириной типичной самой широкой метки. Затем используйте JavaScript, чтобы справиться с краевыми случаями. Если у пользователя нет JavaScript, вы можете отказаться от дизайна "ОК".

Получите самую широкую метку в форме, используя функцию этот ответ, а затем установите ширину всех меток для этого значения.

Это очень похоже на этот ответ, хотя этот параметр устанавливает <li> вместо <label> s.

Ответ 5

попробуйте

label{
min-width:180px;
width:auto;
}

Ответ 6

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