0

Web ページに投票投票をレイアウトしようとしています。

投票は、ラジオ ボタンとして表示され<div>、関連するすべての投票データが含まれている必要があります。投票データ内で<div>、左側にオプション テキスト、右側にパーセンテージが必要です。これは、レイアウトの基本的な視覚的表現です -

/---------------------------------------------------\
|/-------\/----------------------------------------\|
||       ||/------------------------\/------------\||
|| Radio ||| Option text            || Percentage |||
||       ||\------------------------/\------------/||
|\-------/\----------------------------------------/|
\---------------------------------------------------/

私はこれをほとんど手に入れました（私は思う！）が、ラジオボタンがあまりにも多くのスペースを占めているため、幅が間違っています。<div>残りのデータを含む が残りのスペースを直接右側に占めて、それらは必要なだけの幅にする必要があります。

CSS/HTML を変更して希望どおりのレイアウトを作成する方法を教えてください。

コードへのリンクは次のとおりです- http://jsfiddle.net/D4cqL/

4

2 に答える 2

1

display-container に幅を追加するだけです:

.poll .poll-option-container .poll-option-display-container {
    margin: 0 0 0 10px;
    float: right;
    width:93%;
}

また、垂直方向の配置のために、チェックボックス コンテナーに行の高さを追加します。

.poll .poll-option-container .poll-option-checkbox-container {
    height: 36px;
    line-height:36px;
    overflow: hidden;
    padding-right: 1px;
}

それが役に立てば幸い

フィドル

于 2013-10-22T10:23:13.383 に答える