将输入元素对齐在两个字段集中

时间:2015-02-09 09:20:47

标签: html css

我的坐标是这样的:http://jsfiddle.net/9fxvf5w2/10/我需要让fieldset元素中的输入元素相互对齐。

它们很好地对齐了fieldset元素,但是我需要它们与另一个fieldset中的输入元素对齐。

HTML:

<ol>
            <fieldset >
                <legend>
                    kljjlkjlk
                </legend>

            <li><label>wertwsssssssssssssssertwert</label>
                <input />   
            </li>
            <li><label>asdasdasdas</label><input />
            </li>
                <li><label>xcvxcvxcvxc</label> <input />
            </li>


            </fieldset>
            <fieldset >
                <legend>
                    vxvcvcxv
                </legend>
                <li><label>wertwertwert</label>
                <input />   
            </li>
            <li><label>asdasdasdas</label><input />
            </li>
                <li><label>xcvxcvxcvxc</label> <input />
            </li>
            </fieldset>
        </ol>

CSS:

li{
    list-style-type:none;
}
ol{
    display: table;
}

ol li{
    display: table-row;
}

ol li label,
ol li input{
    display: table-cell;
}

1 个答案:

答案 0 :(得分:1)

是的,使用css可以对齐具有相同大小的2个元素。

ol{

    list-style:none;
    display:block;
    width:400px;
}

ol li{
    display:block;
    width:100%;
}

ol li label,
ol li input{
    display: block;
    height:40px;
    float:left;
    width:45%;
}