html - 坚持尝试布局我的领域

Question

我是 CSS 新手，但我正在尝试创建此布局:

我已经试着搞清楚了，这里是我的代码:

http://jsfiddle.net/cskQ8/

现在，我知道这是基本的，但我做错了什么？

P.s 我希望它能够应对任何高度(即非常高)的 field

Answer 1

添加.fieldwrapper{display:inline-block}

由于 div 是 block 元素，它会显示在下一行中，因此将其设为内联 block ，然后它会在同一行中流动。

演示 here

---

在简单的形式中，您可以删除输入周围的 div 并像下面这样写

    <div class="r6 dc3 ts2 p4">
    <label field_id="None" for="sender">Sender email address</label>
    <input class="field r2 lft dc1 tc5 ts3" placeholder="Email" type="text" value="">
    </div>​

.lft { float: left; }
ul, li { list-style-type: none; }
.ts3 { font-size: 15px; }
.dc3 { background-color: #808080; }
.tc5 { color: #333333; }
.p4 { padding: 4px; }
.r2 { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.r6 { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; overflow:auto}
.field { line-height:27px; font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; padding-left:5px; margin-right: 15px; width:250px; }
label{float:left; padding-right:15px}

演示 http://jsfiddle.net/cskQ8/11/