Question

我正在尝试在网页上布局投票。

轮询应显示为单选按钮，然后显示包含所有相关轮询数据的<div>。在民意调查数据<div>中，我需要左侧的选项文本，然后是右侧的百分比。这是布局的基本视觉表示 -

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

我几乎得到了这个（我想！），但是宽度错误，单选按钮占用了太多空间。它们应该只有所需的宽度，<div>包含其余数据直接占据右边的其余空间。

有人可以建议我如何改变我的CSS / HTML来制作我想要的布局吗？

以下是代码的链接 - http://jsfiddle.net/D4cqL/

Answer 1

只需在展示广告容器中添加一个宽度：

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

我还为checkbox-container添加了一个行高，用于垂直对齐：

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

希望有所帮助

<强> FIDDLE

Answer 2

.poll-option-checkbox-container input {
    margin-top: 15px;
}

使用复选框进行选项布局，然后使用div内联

2 个答案: