Question

我有其他人提供的以下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

Answer 1

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

.yesno div { display: inline; }

Answer 2

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

即可

这是你想要的吗？

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

Answer 3

如果您使用CSS3（不确定这是否适用于2？），您可以这样做：

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

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

3 个答案: