Расположение элементов fieldset как типичный дизайн таблицы - PullRequest
Новая
       10

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

3 голосов
/ 04 июня 2011

Я пытаюсь расположить заголовки для 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 для того, что я делаю здесь, кажется лучшей альтернативой, с точки зрения красивого кода.

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

Ответы [ 2 ]

2 голосов
/ 09 октября 2012

Как это 

    .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>
2 голосов
/ 04 июня 2011

то, что вы могли бы сделать, это удалить 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>
...