0

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

投票应该显示为一个单选按钮，然后是一个<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 回答
-1 
.poll-option-checkbox-container input {
    margin-top: 15px;
}
于 2013-10-22T10:16:36.553 回答