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/

とpradioboxコンテナに幅を指定し、要素をフロートさせただけです。

于 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 に答える