如何更改div的正常页面流?

时间:2011-02-07 00:04:50

标签: css html

我有其他人提供的以下HTML:

<div class="surveyTable">
    <div id='fac_light' class='yesno vertical' >
        <div id='fac_light_title' class='title' >Lighting (DT)</div>
        <div id='fac_light_buttons' class='answers' >
            <div id='fac_light_button_0' class='answer' >
                <input id='fac_light_radio_0' type="radio" name="FAC_LIGHT" value="1" checked="yes"/>
            </div>
            <div id='fac_light_button_1' class='answer' >
                <input id='fac_light_radio_1' type="radio" name="FAC_LIGHT" value="2"/>
            </div>
        </div>
    </div>
    <div id='fac_park' class='yesno vertical invalid' >
        <div id='fac_park_title' class='title' >Parking Lot/Curbs (DT)</div>
        <div id='fac_park_buttons' class='answers' >
            <div id='fac_park_button_0' class='answer' >
                <input id='fac_park_radio_0' type="radio" name="FAC_PARK" value="1" checked="yes"/>
            </div>
            <div id='fac_park_button_1' class='answer' >
                <input id='fac_park_radio_1' type="radio" name="FAC_PARK" value="2"/>
            </div>
        </div>
    </div>
</div>

我想设置输入(单选按钮)的样式,使它们在页面上从左向右流动,因此它们在yesno类设置的两个div之间排列。

我不想引用ID,因为这会导致我的stlyesheet中出现大量的类,无论如何,这些ID都是机器生成的并且不可靠。

到目前为止,我有以下CSS,其中没有一个控制流...

body
{
    font-family: "trebuchet ms", helvetica, sans-serif;
}
.yesno
{
    padding-left: 1em;
    padding-bottom: 1em;
}

div.invalid
{
    font-weight: bold;
    font-style: italic;
    border: red 1px dashed;
}

TIA

3 个答案:

答案 0 :(得分:0)

那么,您希望yesno div中的所有div都以内联方式显示吗?

.yesno div { display: inline; }

答案 1 :(得分:0)

只需将float:left;添加到yesno类

即可

这是你想要的吗?

http://jsfiddle.net/Mutant_Tractor/hQVHA/

答案 2 :(得分:0)

如果您使用CSS3(不确定这是否适用于2?),您可以这样做:

.answers input[type=radio]
{
    float: left;
    margin-left: 10px;
}