html - CSS定位

Question

在我的 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 link .请告诉我如何正确安排。

Answer 1

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

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

我只是给了 p 和 radiobox 容器一个宽度，并让元素 float 。