Сделать макет варианта с флажком, а затем div inline

Question

Сделать макет варианта с флажком, а затем div inline

0

Я пытаюсь составить опрос голосования на веб-странице.

Опрос должен отображаться как радиокнопка, а затем <div> содержащий все соответствующие данные опроса. В пределах данных опроса <div> мне нужен текст опции слева, а затем процент справа. Вот основное визуальное представление макета -

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

Я почти получил это (я думаю!), Но ширина ошибочна, при этом радиокнопка занимает слишком много места. Они должны быть настолько широкими, насколько это необходимо, с <div> содержащим остальную часть данных, занимающих остальную часть пространства прямо справа.

Может кто-нибудь, пожалуйста, предложите, как я могу изменить свой CSS/HTML, чтобы сделать макет, как я желаю?

Вот ссылка на код - http://jsfiddle.net/D4cqL/

David Gard 22 окт. 2013, в 12:24

Источник

Теги:

html

css

layout

2 ответа

-2

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

Sami 22 окт. 2013, в 08:19

Ещё вопросы

EdenSource · Accepted Answer · 2013-10-22T08-58-00.000Z

Просто добавьте ширину в контейнер-дисплей:

.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;
}

Надеюсь, поможет

FIDDLE

Я полагаю, что в этом случае это сработает, поскольку общее занимаемое пространство установлено, а не динамически. Спасибо!