一起内联和块表单输入答案

【问题标题】：Inline & Block Form Inputs together一起内联和块表单输入
【发布时间】：2012-05-01 14:56:44
【问题描述】：

我正在尝试为我的表单提供一个类似于此图像 http://reversl.net/demo/ 上显示的布局，其中名字和姓氏输入是内联的，但所有其他输入都是堆叠的（即彼此叠加）。我目前有类似http://reversl.net/form/ 使用以下标记的东西；

<div class="container">
  <form>
<ol>            
  <li>
    <label for=name>Firstname:</label>
    <input id=name name=name type=text placeholder="Jon" required autofocus>
  </li>

  <li>
    <label for=name>Surname:</label>
    <input id=surname name=surname type=text placeholder="Doe" required autofocus>
  </li>

  <li>
    <label for=message>Message:</label>
    <textarea id=message name=message placeholder="Type your message here..." required></textarea>
  </li>

</ol>
  </form>
</div>

样式如下；

label {
display: block;
line-height: 1.75em;
}

input, textarea {   
width: 250px;
display: inline-block;
margin-bottom: 2em;
padding: .75em .5em;
color: #999;
border: 1px solid #e9e9e9;
outline: none;
}

input:focus, textarea:focus {
-moz-box-shadow:    inset 0 0 3px #aaa;
-webkit-box-shadow: inset 0 0 3px #aaa;
box-shadow:         inset 0 0 3px #aaa;
}

textarea {
height: 100px;
}

【问题讨论】：

具体来说，您需要帮助解决什么问题？
@ktash，整理好了。只需将选定的 li 设置为显示：inline block

标签： css forms input

【解决方案1】：

提供前两个 LI display: inline-block 并根据需要调整填充/边距。

【讨论】：

【解决方案2】：

我做到了

HTML

<div class="container">
    <form>
        <ul style="float: left">
            <label for="name">Firstname</label>
            <input id="name" autofocus="" name="name" placeholder="Jon" required="" type="text">
        </ul>
        <ul style="float: left">
            <label for="name">Surname</label>
            <input id="surname" autofocus="" name="surname" placeholder="Doe" required="" type="text">
        </ul>
        <br><br><br><br><br>
        <ul>
            <ul style="padding: 0px; margin: 0px">
                Message</ul>
&nbsp;<textarea id="message" name="message" placeholder="Type your message here..." required="" style="width: 536px"></textarea>
        </ul>
    </form>
</div>

和CSS

label {
    display: block;
    line-height: 1.75em;
}
input, textarea {
    width: 250px;
    display: inline-block;
    margin-bottom: 2em;
    padding: .75em .5em;
    color: #999;
    border: 1px solid #e9e9e9;
    outline: none;
}
input:focus, textarea:focus {
    -moz-box-shadow: inset 0 0 3px #aaa;
    -webkit-box-shadow: inset 0 0 3px #aaa;
    box-shadow: inset 0 0 3px #aaa;
}
textarea {
    height: 100px;
}
ul {
    margin: 0px;
}

【讨论】：