Отображение элементов, встроенных в HTML? - PullRequest
Новая
       6

Отображение элементов, встроенных в HTML?

1 голос
/ 01 марта 2012

Я пытаюсь создать веб-приложение, и в нем я хочу, чтобы эти два поля были встроенными (проверьте изображение ниже) Теперь BugID является элементом <input>, а описание - <textarea>. В настоящее время у меня есть это: 

<div class="some">
  <h3 id="title1">Bug ID:<span class="required">*</span></h3>
  <h3 id="title">Enter Description:<span class="required">*</span></h3>
  <br/>
  <div class="inputs">
  <input size="8" maxlength="8" name="BugID" type="text" id="BugID" placeholder="Bug ID" style="width:100px" />
  <textarea rows="5" id="Summary" name="summary" placeholder="Please Enter a Summary of the Bug" ></textarea>
   </div>
   </div>

И CSS: 

.inputs input, textarea{
      display:inline;
}

Это неправильно? Как мне это сделать?

Current Implementation

Ответы [ 6 ]

6 голосов
/ 01 марта 2012

Это то, что вы хотите?

   .inputs input, textarea{
          display:inline;
          float:left;

    }
1 голос
/ 01 марта 2012

Попробуйте это: 

#BugID, #Summary
{
    display: inline-block;
    float: left;
}

.clear
{
    clear: both;
}

И добавить дополнительный div после обоих полей с class = "clear"

Редактировать: Используйте приведенный ниже пример, я только что проверил его, и он выровняет заголовки и поля в строке для вас 

<style>
#BugID, #Summary, h3
{
    display: inline-block;
    float: left;
}

#BugID, #title1
{
    width: 100px;
}

.clear
{
    clear: both;
}
</style>

<div class="some">
  <h3 id="title1">Bug ID:<span class="required">*</span></h3>
  <h3 id="title">Enter Description:<span class="required">*</span></h3>
  <div class="clear"></div>
  <div class="inputs">
  <input size="8" maxlength="8" name="BugID" type="text" id="BugID" placeholder="Bug ID" style="width:100px" />
  <textarea rows="5" id="Summary" name="summary" placeholder="Please Enter a Summary of the Bug" ></textarea>
   </div>
   </div>
0 голосов
/ 02 марта 2012

Я предложу лучший вариант.Обновите структуру разметки до более структурной.Может быть что-то вроде этого 

<div class="some">
    <div class="input">
      <h3 id="title1">Bug ID:<span class="required">*</span></h3>
      <input size="8" maxlength="8" name="BugID" type="text" id="BugID" placeholder="Bug ID" style="width:100px" />
    </div>
    <div class="input">
      <h3 id="title">Enter Description:<span class="required">*</span></h3>
      <textarea rows="5" id="Summary" name="summary" placeholder="Please Enter a Summary of the Bug" ></textarea>
    </div>
</div>​

Теперь исправление : CSS 

.input { display: inline-block; display: table-cell; vertical-align: top; }​

Демо

0 голосов
/ 02 марта 2012

<input> - встроенные элементы по умолчанию. Вам нужно изменить <h3> s на встроенный (так как это блочные элементы).

Я также предлагаю не использовать <h3> теги ни для чего, кроме того, для чего они предназначены. Они предназначены для обозначения заголовков / подзаголовков, а не для форматирования текста. Могу ли я предложить тег <label>? 

<div class="some">
  <label id="title1" for="BugID">Bug ID:<span class="required">*</span></label>
  <label id="title" for="Summary">Enter Description:<span class="required">*</span></label>
  <br/>
  <div class="inputs">
     <input size="8" maxlength="8" name="BugID" type="text" id="BugID" placeholder="Bug ID" style="width:100px" />
     <textarea rows="5" id="Summary" name="summary" placeholder="Please Enter a Summary of the Bug" ></textarea>
  </div>
</div>​​​​​​

ДЕМО: http://jsfiddle.net/vW3GL/

0 голосов
/ 01 марта 2012

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

0 голосов
/ 01 марта 2012

Возможно, меня за это убьют, но лично я бы использовал table, потому что ваш макет выглядит как таблица.

...