Выровнять по горизонтали поля выбора - PullRequest
0 голосов
/ 21 сентября 2019

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

Вот ссылка на скрипку:

<body>
 <form>
    <div id="test" class="page four">
     <fieldset class="wrapSection">
        <legend><b>Config</b></legend>
        <div id="blank"><div class="leftcolumn" style="display: inline"><b>Select 1: </b></div><span><select id="select_1"></select></span></div>
        <div id="select_2_div"><div class="leftcolumn" style="display: inline"><b>On Select 2: </b></div><span><select id="select_2"></select></span></div>
        <div id="select_3_div"><div class="leftcolumn" style="display: inline"><b>Mot Select 3: </b></div><span><select id="select_3"></select></span></div>
        <div id="select_4_div"><div class="leftcolumn" style="display: inline"><b>Really Long Label:</b></div><span><select id="select_4"></select></span></div>
        <div id="select_5_div"><div class="leftcolumn" style="display: inline"><b>Short: </b></div><span><select id="select_5"></select></span></div>
     </fieldset>
    </div>
 </form>
</body>

Ответы [ 4 ]

0 голосов
/ 22 сентября 2019

Обычно, когда эти блоки установлены на элементе div, этот элемент имеет атрибуты элемента «block».В противном случае отображать содержимое как блок.Надеюсь, вы найдете это полезным?

0 голосов
/ 21 сентября 2019

Вам необходимо изменить эти .leftcolumn элементы с display: inline на display: inline-block.Затем вы можете применить к нему width (который не будет действовать на inline элементах, но на встроенных блоках), что будет выглядеть так, как вы хотите:

.leftcolumn {
  display: inline-block;
  width: 160px;
}
<form>
  <div id="test" class="page four">
    <fieldset class="wrapSection">
      <legend><b>Config</b></legend>
      <div>
        <div class="leftcolumn"><b>Select 1: </b></div><span><select id="select_1"></select></span></div>
      <div id="select_2_div">
        <div class="leftcolumn"><b>On Select 2: </b></div><span><select id="select_2"></select></span></div>
      <div id="select_3_div">
        <div class="leftcolumn"><b>Mot Select 3: </b></div><span><select id="select_3"></select></span></div>
      <div id="select_4_div">
        <div class="leftcolumn"><b>Really Long Label: </b></div><span><select id="select_4"></select></span></div>
      <div id="select_5_div">
        <div class="leftcolumn"><b>Short: </b></div><span><select id="select_5"></select></span></div>
    </fieldset>
  </div>
</form>

Вы писали, что хотели бы использовать только HTML: Вы можете также применить эти настройки в качестве встроенных стилей к каждому из элементов, но это сложнееи с помощью отдельного правила CSS вы можете при необходимости изменить width для всех из них.

0 голосов
/ 22 сентября 2019

Установите родительский div с классом wrapperSection для отображения: flex, вы также можете установить направление flex на строки, если вы хотите, чтобы он был выровнен по горизонтали, или установить его в столбец, если вы хотите, чтобы он выровнялся по вертикали.Я также нашел эту ссылку полезной https://www.w3schools.com/css/css3_flexbox.asp Я надеюсь, что это поможет

0 голосов
/ 21 сентября 2019

Этого можно добиться, сделав каждую «строку» в наборе полей display: flex и присвоив контейнерам выбора блока margin-left: auto:

fieldset>div:not(legend) {
  display: flex;
}

fieldset>div:not(legend)>*:nth-child(2) {
  margin-left: auto;
}
<div id="test" class="page four">
  <fieldset class="wrapSection">
    <legend><b>Config</b></legend>
    <div id="blank">
      <div class="leftcolumn" style="display: inline"><b>Select 1: </b></div><span><select id="select_1"></select></span></div>
    <div id="select_2_div">
      <div class="leftcolumn" style="display: inline"><b>On Select 2: </b></div><span><select id="select_2"></select></span></div>
    <div id="select_3_div">
      <div class="leftcolumn" style="display: inline"><b>Mot Select 3: </b></div><span><select id="select_3"></select></span></div>
    <div id="select_4_div">
      <div class="leftcolumn" style="display: inline"><b>Really Long Label:</b></div><span><select id="select_4"></select></span></div>
    <div id="select_5_div">
      <div class="leftcolumn" style="display: inline"><b>Short: </b></div><span><select id="select_5"></select></span></div>
  </fieldset>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...