Как переключаться в явном пространстве

Мой переключатель не будет располагаться равномерно. Я попытался добавить: «margin-right: 250px;» наряду с другим методом, но они не дадут мне результата, который я ищу. Я хочу, чтобы кнопки были равномерно размещены на странице и оставались центрированными. Также я попытался добавить стиль текста рядом с переключателями, но я не знаю, как включить его в CSS моего кода. Однако код работает в теле.Как переключаться в явном пространстве

Вот JSFiddle: http://jsfiddle.net/2DJsP/embedded/result/

Вот CSS:

#navlist li { 
margin-left: auto; 
margin-right: auto; 
} 
style="color:#fa7f28; font-size:20px; font-weight:bold;

источник

2013-09-14 user2680614

Предполагая, что вы контролируете разметку, простой способ будет обернуть радиокнопки и соответствующий текст в span элементах, установите display из span в inline-block и установить общую ширину.

<span><input type="radio" onclick=tryToMakeLink(); name="q1" value="AT&T" />ATT</span> 
<span><input type="radio" onclick=tryToMakeLink(); name="q1" value="Other" />Other</span> 
<span><input type="radio" onclick=tryToMakeLink(); name="q1" value="Unlocked" />Unlocked</span>

CSS:

#navlist li span { 
    display: inline-block; 
    width: 6em; 
}

Демо: http://jsfiddle.net/2DJsP/3/

источник

2013-09-14 02:26:18 pete

Я пробовал это. 6em нельзя увеличить. Я хочу больше места между переключателями. – user2680614

Что это значит? Увеличьте пространство до '10em' или какого-либо другого произвольного значения в скрипке, а переключатели перемещаются дальше. – pete

Да, но я хочу, чтобы расстояние было больше, чем просто 10, но когда я увеличиваю «em», он просто искажает форму. – user2680614

Учитывая HTML разметки вы в настоящее время, следующий CSS является подход, который использует наименьшее количество CSS:

#navlist li > input { display:inline-block; margin:0 5px 0 50px; }

http://jsfiddle.net/2DJsP/4/

Примечание, margin и padding не относятся к inline элементы. Использование дисплея inline-block позволяет использовать margin s и padding, сохраняя при этом элементы вместе со связанным с ними текстом в текущем потоке.

источник

2013-09-14 02:26:11 xandercoded

Я увеличил 50 до 200, и кажется, что код перемещается влево от страницы. http://jsfiddle.net/2DJsP/5/embedded/result/ – user2680614

@ user2680614 что вы ожидали? – xandercoded

Я хочу, чтобы он был равномерно размещен на странице и центрирован. – user2680614

Для современных браузеров, вы можете равномерно распределить элементы, используя Flexbox с justify-content: space-between;:

#navlist li { 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    justify-content: space-between; 
}

Для других браузеров, вы можете эмулировать это (вид) с помощью text-align: justify и псевдоэлементный трюк для принудительного переноса строк. См. Оба примера: in this edited fiddle.

источник

2013-09-14 03:32:10

Вот что я ищу, но как вы меняете сумму пространства между переключателями? – user2680614

@ user2680614, он меняется автоматически. Браузер просто распределяет дополнительное горизонтальное пространство между элементами flex (в версии Flexbox) или между словами (в текстовой-выравнивающей версии), вот как работают эти свойства CSS. –

Как переключаться в явном пространстве

ответ

Смежные вопросы