CSS -> Проблемы с очень простым CSS-макетом

Я новичок в CSS/Javascript, и у меня проблемы с чем-то, что кажется, должно быть простым. У меня есть серия переключателей и соответствующий текст. Мне бы хотелось, чтобы все это выглядело как список маркеров, но по какой-то причине возиться со свойствами одного беспорядка (или заменяет?) Выравнивание другого.CSS -> Проблемы с очень простым CSS-макетом

Пытаясь достичь этого (текст, примыкающий к кнопке):

enter image description here

Как стиль это в CSS?

<form id="form1"> 
    <input type="radio" name="choices" class="radioButtons" value="0" id="choice0"> 
    <div id="c0" class="choiceText">text here</div> 
    <input type="radio" name="choices" class="radioButtons" value="1" id="choice1"> 
    <div id="c1" class="choiceText">text here</div> 
    <input type="radio" name="choices" class="radioButtons" value="2" id="choice2"> 
    <div id="c2" class="choiceText">text here</div> 
</form>

источник

2014-01-17 i_made_that

Дело в том, что div элемент, по умолчанию, имеют свойство его display CSS установлен block.

Quoting W3Schools, «элемент блока - это элемент, который занимает всю доступную ширину и имеет разрыв строки до и после него». вы можете заметить, что и <div>, и <p> ведут себя так.

У вас есть пара вариантов здесь. Вы можете использовать элемент, у которого свойство display уже установлено на inline по умолчанию, например span или label. Встроенный элемент занимает столько же ширины, сколько необходимо, и не форсирует разрывы строк.

Вы также можете установить DIV s в display:inline вместо стандарта display:block. Но тогда вы, вероятно, захотите сломать строку после контента; в этом случае вы можете использовать маркер :after селектор, добавив разрыв строки - как это:

<style> 
    div.choicetext { display:inline; } 
    div.choicetext:after { content:"\A"; white-space:pre; } 
</style> 

<form id="form1"> 
    <input type="radio" name="choices" class="radioButtons" value="0" id="choice0"> 
    <div id="c0" class="choiceText">text here</div> 
    <input type="radio" name="choices" class="radioButtons" value="1" id="choice1"> 
    <div id="c1" class="choiceText">text here</div> 
    <input type="radio" name="choices" class="radioButtons" value="2" id="choice2"> 
    <div id="c2" class="choiceText">text here</div> 
</form>

источник

2014-01-17 06:27:05 OnoSendai

Вы не делаете это немного сложным? То, что вы делаете, достигается тегом 'label'. – pattmorter

Я так не думаю, @pattmorter. OP явно упомянул о своем интересе к обучению тому, как это сделать с помощью CSS, - его вопрос: «Как это стилизовать в CSS?». Предложение использовать тег метки не объясняет, почему он получает этот результат; дополнительная информация предназначена для того, чтобы показать ему, почему это происходит. – OnoSendai

Очень простой, используйте тег <label>. Не требует дополнительного стиля или каких-либо трюков CSS, чтобы заставить его работать. Это просто работает. То, для чего был создан тег <label>.

Вот MDN. Вот Fiddle

<form id="form1"> 
    <input type="radio" name="choices" class="radioButtons" value="0" id="choice0"> 
    <label id="c0" class="choiceText">text here</label> 
    <input type="radio" name="choices" class="radioButtons" value="1" id="choice1"> 
    <label id="c1" class="choiceText">text here</label> 
    <input type="radio" name="choices" class="radioButtons" value="2" id="choice2"> 
    <label id="c2" class="choiceText">text here</label> 
</form>

источник

2014-01-17 06:25:49 pattmorter

Попробуйте

<form id="form1"> 
      
     <div id="c0" class="choiceText"> 
     <input type="radio" name="choices" class="radioButtons" value="0" id="choice0"> 
      text here</div> 
      
     <div id="c1" class="choiceText"> 
     <input type="radio" name="choices" class="radioButtons" value="1" id="choice1"> 
      text here</div> 
      
     <div id="c2" class="choiceText"> 
     <input type="radio" name="choices" class="radioButtons" value="2" id="choice2"> 
      text here</div> 
      
    </form>

источник

2014-01-17 06:30:48

CSS -> Проблемы с очень простым CSS-макетом

ответ

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