Вопрос по css, optimization, html, html-table – Такое выравнивание возможно без <table> ?

10

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 таблицы-строки / таблицы-столбца и требует от вас угадать работу

Я согласен с тем, что стол не является лучшим способом попасть сюда. Да, таблицы выполняют свою работу, но они не являются семантически правильными, так как вы не создаете таблицу. Достичь того же с помощью CSS очень просто (см. Мой ответ) xbonez
Как я уже сказал, все статьи о дизайне, которые я прочитал, препятствуют использованию таблиц, поэтому возникает вопрос. AM-
Использование таблиц для разметки не является хорошей практикой проектирования. Используйте таблицы для табличных данных, для чего они предназначены. saluce
Что не так с таблицей? Это то, для чего они предназначены. Все остальное, вероятно, будет более сложным, чем использование таблицы. Will

Ваш Ответ

5   ответов
4

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

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

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

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

Example

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

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

<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>

Гораздо более надежное и удобное в обслуживании решение, чем приведенное выше, поскольку оно не требует определения ширины.
Это первое решение, которое я видел, которое избегает указания ширин и ведет себя так же, как таблица. Отлично!
0

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

2

Да, такое выравнивание возможно. Используя 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/

5

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

Использование таблиц 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;
}

Вотпример

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

Похожие вопросы