Question

所有

我有以下代码：

我试图避免CSS中的固定宽度并以这种方式对齐div，但是我无法这样做：

Your name    Textbox
             Please check the name
Work email   Textbox 
             Email should have a valid format
Job title    Textbox
             Job title should have only alphabets

感谢任何帮助。感谢

Answer 1

试试这个：http://jsfiddle.net/k2AMG/9/

Answer 2

试试这样：

http://jsfiddle.net/andresilich/k2AMG/11/

::编辑::修复演示

::编辑2 ::添加了CSS和HTML以供将来参考

<强> CSS

.data_item{
   margin-bottom: 20px;
   display: block;
}

label
{
    width: 100px;
    display:inline-block;
}

.left {
    display:inline-block;
    margin-right:5px;
}

.right {
    display:inline-block;
    vertical-align:top;
}

.right span span {
    display:list-item;
    list-style-type:none;
}

澄清：创建两个类来分隔双方， .left 和 .right ，并在.instructions div的范围中添加样式以显示为list-item（因此它们可以像普通的html列表一样移位，为什么？因为它是一个干净的，响应性的下降，自然取代而不需要添加可能会替换任何其他元素的边距或填充，从而减少维护。）

<强> HTML

<div class="data_item">
    <div class="left">
        <label> Your name </label>
    </div>
    <div class="right">
        <span>
           <input type="text" />
           <span class="instructions">Please check the name</span>
        </span>
    </div>
</div>

<div class="data_item">
    <div class="left">
        <label> Work email </label>
    </div>
    <div class="right">
        <span class="item">
           <input type="text" />
           <span class="instructions">Email should have a valid format</span>
        </span>
    </div>
</div>

<div class="data_item">
    <div class="left">
        <label> Job title </label>
    </div>
    <div class="right">
        <span class="item">
           <input type="text" />
           <span class="instructions">Job title should have only alphabets</span>
        </span>
    </div>
</div>

在文本框下对齐指令div标签

2 个答案: