Расположение элементов набора полей, как в типичном табличном дизайне

Я пытаюсь упорядочить заголовки для 3 элементов fieldset так же, как выглядит типичная таблица, но я не могу сделать это так, как хочу. Однако это довольно близко...

<label style="vertical-align:top;">Title1</label>
<fieldset style="display:inline; border:none; padding:0px; margin:0px; vertical-align:middle;">
<input value="Lorem Ipsum" /><br />
<input value="Lorem Ipsum" /><br />
<input value="Lorem Ipsum" />
</fieldset>

<label style="vertical-align:top;">Title2</label>
<fieldset style="display:inline; border:none; padding:0px; margin:0px; vertical-align:middle;">
<input value="Lorem Ipsum" />
</fieldset>

<label style="vertical-align:top;">Title3</label>
<fieldset style="display:inline; border:none; padding:0px; margin:0px; vertical-align:middle;">
Lorem Ipsum
</fieldset>

Возможно, я использовал таблицы, если бы мне не нужно было запускать оператор if в моем PHP-коде как для заголовка, так и для элемента fieldset. Кроме того, использование fieldset для того, что я здесь делаю, кажется лучшей альтернативой с точки зрения красивого кода.

Есть какие-нибудь предложения для чего-нибудь похожего на код выше? Пояснение: http://anony.ws/di-FJKD.jpg


person Nisto    schedule 04.06.2011    source источник
comment
Что он НЕ делает из того, что вы хотите? У вас есть изображение или пример того, каким должен быть конечный результат? Я хотел бы помочь вам, но я не уверен, что вы на самом деле пытаетесь сделать.   -  person stogdilla    schedule 04.06.2011
comment
Есть картинка. Прямо в конце поста.   -  person Nisto    schedule 04.06.2011
comment
Как я сказал; это чище, и мне не придется дважды запускать оператор if для одного и того же. Это избыточно.   -  person Nisto    schedule 04.06.2011
comment
Метки предназначены для элементов управления вводом. Вместо этого используйте legend и поместите их в набор полей.   -  person NGLN    schedule 04.06.2011


Ответы (2)


то, что вы могли бы сделать, это удалить label из потока, чтобы они не выровнялись по вертикали с входными данными/текстом.. сделайте это, абсолютно позиционируя их.. для этого потребуется, чтобы родительский элемент имел position: relative; на нем - я предполагаю, что общий код выше находится в form element, но ради демонстрации я только что обернул весь ваш код в div.

Рабочий пример

HTML:

<div id="form"> 

  <label>Title1</label>
  <fieldset>
    <input value="Lorem Ipsum" /><br />
    <input value="Lorem Ipsum" /><br />
    <input value="Lorem Ipsum" />
  </fieldset>

  <label>Title2</label>
  <fieldset>
    <input value="Lorem Ipsum" />
  </fieldset>

  <label>Title3</label>
  <fieldset>
  Lorem Ipsum
  </fieldset>

</div>

CSS:

#form {
  position: relative; /* labels need this on the their parent element */
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  padding-top: 30px; /* leave a space to position for the labels */
}

fieldset {display: inline-block; vertical-align: middle;}
fieldset {display: inline !ie7; /* IE6/7 need display inline after the inline-block rule */}

label {
   position: absolute; 
   top: 5px; 
   left: auto; 
   margin-left: 5px; 
   font-weight: bold;
}

добавлено по комментариям

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

#form {
  position: relative; /* labels need this on the their parent element */
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset {display: inline-block; vertical-align: middle; background: #eee;}
fieldset {display: inline !ie7;}


label {
   display: block;
   font-weight: bold;
}

HTML:

<fieldset>
  <label>Title1</label>
  <input value="Lorem Ipsum" /><br />
  <input value="Lorem Ipsum" /><br />
  <input value="Lorem Ipsum" />
</fieldset>


<fieldset>
  <label>Title2</label>
  <input value="Lorem Ipsum" />
</fieldset>


<fieldset>
  <label>Title3</label>
  Lorem Ipsum
</fieldset>
person clairesuzy    schedule 04.06.2011
comment
+1 Но встроенный блок не нужен. Встроенный работает нормально, см. эту скрипту - person NGLN; 04.06.2011
comment
так что это не спасибо !, так что нет необходимости в взломе IE. Извините, я работал над другим способом сделать это, который означал бы, что HTML был бы переписан, забыл изменить его обратно к основам - однако, если вам нужна ширина на встроенный блок fieldset, возможно, был бы лучшим вариантом. - person clairesuzy; 04.06.2011
comment
Нет ли способа выровнять текст над тегами fieldset без использования абсолютного позиционирования? Я не совсем ищу точную позицию текста; Мне просто нужен текст над элементами набора полей. - person Nisto; 04.06.2011
comment
вы можете переместить метки внутри набора полей и сделать их display:block; без позиционирования и дополнительного заполнения. - person clairesuzy; 04.06.2011
comment
Я пытаюсь использовать display:block; вместо <legend>, но это не работает должным образом. Есть что-то, что мне не хватает? Я удалил коды position:absolute; и padding:1.25em;. - person Nisto; 04.06.2011
comment
legends - это боль, я все еще работал с label внутри fieldset, хотя, по общему признанию, label, вероятно, неправильный элемент, и я был бы склонен использовать элемент h4 или что-то в этом роде, и в этом случае это естественный блок элемент в любом случае.. добавили код для ответа - person clairesuzy; 04.06.2011
comment
Я думаю, вы, возможно, неправильно поняли. Я хочу, чтобы заголовки располагались вверху элементов, как в таблице. Я просто не хотел использовать абсолютное позиционирование, потому что положение элементов могло отличаться, и, следовательно, положение заголовков также должно было отличаться. - person Nisto; 04.06.2011
comment
Я действительно задавался вопросом о вашем втором вопросе;) - так вы хотите, чтобы он выглядел только как мой первый ответ, но без позиционирования? .. хм, не уверен в этом, с таблицей, для достижения которой потребуется две строки. Итак, можете ли вы привести пример того, где мой первый ответ не работает для вас ... это то, что наборы полей могут перейти к строкам? - person clairesuzy; 04.06.2011
comment
Дело в том, что если я использую абсолютное позиционирование, оно добавит заголовки в самый верх страницы, а это определенно не то, чего я хочу. Я использую этот код: jsfiddle.net/sKgcs , видите, как заголовки сливаются с другим контентом? Вот почему я не хочу использовать абсолютное позиционирование. - person Nisto; 04.06.2011
comment
Ах, хорошо, вы пропустили часть ответа о переносе всех наборов полей в элемент (div#form), хотя у вас может быть существующий элемент form, сделайте этот элемент position:relative; вместе с верхним отступом означает, что заголовок остается относительно фактической строки, а не чем просмотр основного содержимого: однако это все равно упадет, если строки перейдут на две строки (сузьте окно) - jsfiddle.net/clairesuzy/7Qk5d — в этом примере я изменил заголовки на h4, если вы попытаетесь заменить их на legend, вы поймете, что я имею в виду под legends быть болью! - person clairesuzy; 04.06.2011

Как это

    .divTable {
      display: table;
      width: 50%;
    }
    .divRow {
      display: table-row;
    }
    .cellOne,
    .cellTwo {
      display: table-cell;
      padding: 20px;
      width: 30%;
    }
<fieldset id="fileConnSet">
  <legend>File:</legend>
  <div class="divTable">
    <!--Table start-->
    <div class="divRow">
      <!--1st row, like <tr>-->
      <div class="cellOne">
        <!--1st column, like <td>-->
        <label>Name:</label>
      </div>
      <div class="cellTwo">
        <!--2nd column-->
        <input type="text" />
      </div>
    </div>

    <div class="divRow">
      <!--2nd row, like <tr>-->
      <div class="cellOne">
        <label>Age:</label>
      </div>
      <div class="cellTwo">
        <input type="text" />
      </div>
    </div>

    <div class="divRow">
      <!--3rd row, like <tr>-->
      <div class="cellOne">
        <label>Company:</label>
      </div>
      <div class="cellTwo">
        <input type="text" />
      </div>
    </div>
  </div>
  <!--Table end-->
</fieldset>

person user1730990    schedule 09.10.2012
comment
Некоторое объяснение было бы неплохо - person Andrew Barber; 09.10.2012