Такое выравнивание возможно без <table> ?

The wanted result

Моя цель - выравнивание, как показано на прикрепленном изображении (поля слева могут иметь любую ширину, но поля справа должны начинаться с того жеX координат).

Прямо сейчас я использую простой код таблицы для достижения этой цели:

<table><tr>
<td>Left1</td><td>Right 1</td></tr>
<tr><td>Left 2</td><td>Right 2</td></tr></table>

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

EDIT: поскольку я до сих пор время от времени получаю уведомление по этому вопросу от людей, которые (предположительно) только начинают работать с HTML, как я, когда я его делал, пожалуйста, обратитесь к принятому ответу BT, так как это, безусловно, лучший способ добиться этого функциональность. Вопрос, предложенный в качестве «возможного дубликата» (31 мая 2016 г.) в настоящее время не предлагает подход на основе CSS таблицы-строки / таблицы-столбца и требует от вас угадать работу

 xbonez13 июн. 2012 г., 21:03
Я согласен с тем, что стол не является лучшим способом попасть сюда. Да, таблицы выполняют свою работу, но они не являются семантически правильными, так как вы не создаете таблицу. Достичь того же с помощью CSS очень просто (см. Мой ответ)
 Will13 июн. 2012 г., 21:01
Что не так с таблицей? Это то, для чего они предназначены. Все остальное, вероятно, будет более сложным, чем использование таблицы.
 AM-13 июн. 2012 г., 21:02
Как я уже сказал, все статьи о дизайне, которые я прочитал, препятствуют использованию таблиц, поэтому возникает вопрос.
Возможный дубликатForms - Can they be done without tables?
 saluce13 июн. 2012 г., 21:04
Использование таблиц для разметки не является хорошей практикой проектирования. Используйте таблицы для табличных данных, для чего они предназначены.

Ответы на вопрос(5)

Решение Вопроса

Я нашел гораздо более простой способ сделать это случайно. Скажем, у вас есть следующее:

<div class='top'>
  <div>Something else</div>
  <div class='a'>
    <div>Some text 1</div>
    <div>Some text 2</div>
  </div>
  <div class='a'>
    <div>Some text 3</div>
    <div>Some text 4</div>
  </div>
</div>

Вы можете настроитьSome text 1 а такжеSome text 2 используя стиль отображения таблицы CSS следующим образом:

.a {
  display: table-row;
}
.a div {
  display: table-cell;
}

Самое классное то, что до тех пор, пока "top" div НЕ в стилеdisplay: tableзатем другие вещи, такие как «что-то еще»; может быть проигнорировано с точки зрения выравнивания. Если «верх» div is styledisplay: tableзатем "некоторый текст 1"; будет выровнен с "Что-то еще" (т.е. он обрабатывает все свои дочерние элементы как строки таблицы, даже если у них другой стиль отображения).

Это работает в Chrome, не уверен, что он должен вести себя таким образом, но я рад, что это работает.

  .a {
      display: table-row;
    }
    .a div {
      display: table-cell;
    }
   <div class='top'>
      <div>Something else</div>
      <div class='a'>
        <div>Some text 1</div>
        <div>Some text 2</div>
      </div>
      <div class='a'>
        <div>Some text 3</div>
        <div>Some text 4</div>
      </div>
    </div>

 26 янв. 2016 г., 19:35
Это первое решение, которое я видел, которое избегает указания ширин и ведет себя так же, как таблица. Отлично!
 10 нояб. 2015 г., 21:11
Гораздо более надежное и удобное в обслуживании решение, чем приведенное выше, поскольку оно не требует определения ширины.

Хотя с таблицами можно добиться того же, семантически неверно использовать таблицу с целью компоновки. Тем более, что вы можете достичь того же, используя всего одну или две строки CSS.

Дайте вашим ярлыкам фиксированную ширину (что-то больше, чем ваш самый длинный текст ярлыка).

<style>
label {
    width: 100px;
    display: inline-block;
}​
</style>

<label>Name</label>
<input type="text" />
<br/>
<label>Email Address</label>
<input type="text" />​

Example

 13 июн. 2012 г., 21:07
что произойдет, если вы пропуститеdisplay:inline-block? (предположительно IE7 не поддерживает его)
 13 июн. 2012 г., 21:23
Браузер будет игнорировать ширину a, s, поскольку ширина может применяться только к элементам уровня блока.

Правда. Я изучаю это трудным путем. Я использовал таблицу для выравнивания, и теперь некоторые выравнивания становятся странными на небольших экранах (например, мобильный телефон, планшеты и т. Д.). Следовательно, я переключаюсь на div. Предпочтительное использование<div style="display:inline-block">...</div>, который будет выравниваться автоматически, если экран меньше. Следовательно, мой совет заключается в том, чтоTable should be used only for genuine tables, and not for aligning controls in a body.

Решение Вопроса

Да, такое выравнивание возможно. Используя CSS-классы, вы можете разметить свой HTML-код таким образом, чтобы добиться такого же внешнего вида таблицы без головной боли при использовании таблицы (или при том, что разметка выглядит некрасиво).

Используя этот CSS:

.label {
    display: inline-block;
    width: 100px;
}

.inputBox {
    width: 200px;
}

и этот HTML:

<span class="label">E-mail:</span><input type="email"></input><br>
<span class="label">Password:</span><input type="text"></input>

Вы получите нужный макет.

Чтобы сделать это с поддержкой IE7, измените CSS выше на это:

.label {
    display: block;
    width: 100px;
    float: left;
    clear: left;
}

Затем добавьте эту строку ниже уже показанных строк:

<div style="clear: left"></div>

Пример использования IE7-совместимых настроек:http://jsfiddle.net/bbXXp/

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

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

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

HTML:

<form>
    <label for="name">Email: </label><input id="name" type="email" placeholder="@" />
    <br/><br />
    <label>Password: </label><input type="password" id="password"  placeholder="*"/>
</form>

CSS:

label {
    width: 80px;
    display: block;
    vertical-align: middle;
    float:left;
    clear:left;
}
input {
    border-top-left-radius:5px;
    border-bottom-right-radius: 10px;
    background: #141414;
    color: #fdd56c;
    outline: none;
}

Вотпример

 13 июн. 2012 г., 21:51
Можно было бы избежать использования float в приведенном выше примере, используяdisplay:inline-block и CSS IE7 взломать как*display:inline, Обновлен ответ, чтобы очистить поплавок
 08 нояб. 2016 г., 14:57
с помощьюbr это неверная идеяstackoverflow.com/questions/3937515/…

Ваш ответ на вопрос