0

在我的 HTML 文档中，我有一个消息和单选框。我希望两者并排显示。消息左，上对齐，单选框右，上对齐。我尝试对容器使用 CSS“display:inline”，但这不起作用。这是代码：

HTML：

<div id="test-div">
  <p>Current time:  <span id="current-time"></span></p>
  <fieldset id="fieldset-options">
  <legend>My Options</legend>
  <input id="opt1" type="radio" name="grp-options" value="1">
  <label id="label-opt1" for="opt1">First Option</label><br/>
  <input id="opt2" type="radio" name="grp-options" value="2">
  <label id="label-opt2" for="opt2">Second Option</label><br/>
  <input id="opt3" type="radio" name="grp-options" value="3">
  <label id="label-opt3" for="opt3">Third Option</label><br/>
  </fieldset>
</div>

CSS：

#test-div {
    font-size : 18px;
    font-weight: bold;
    margin-bottom: 20px;
    position: relative;
    //display: inline;        
}


#test-div #fieldset-options legend {
    font-size: 16px;
    font-weight : bold;
}

#test-div #fieldset-options {
    font-size : 14px;
    font-weight: normal;
    width: 350px;
    position: absolute;
    right: 0px;
}

这是jsfiddle 链接。请告诉我如何正确安排。​</p>

4

3 回答 3

1

有点不清楚你到底想要达到什么目的。是这样的吗？

http://jsfiddle.net/R6HHK/19/

我只是给了p和radiobox容器一个宽度，然后浮动了元素。

于 2012-11-09T19:47:00.123 回答
1

怎么做：

将此代码添加到您的CSS：

#test-div > p{float:left;}

然后从#test-div #fieldset-options 选择器中删除位置和宽度。

那是你想要的吗？

于 2012-11-09T19:47:45.143 回答
1

将时间向左浮动，字段集向右浮动。

#test-div p {
    float:left;
    margin:0;
}
#test-div fieldset {
    float:right;
}​

jsFiddle 示例

您需要清除 ( clear:both) 紧随其后的内容，否则其他元素可能会浮在其下。

于 2012-11-09T19:49:25.717 回答