Простой вопрос о CSS - PullRequest
Новая
       8

Простой вопрос о CSS

0 голосов
/ 23 мая 2009

У меня очень простая страница, как эта

!! @ # @, очевидно, я не могу добавить ссылку на свою страницу в jsbin, поскольку новым пользователям запрещено добавлять ссылки.

Я хочу иметь определенный промежуток между различными опциями, предоставляемыми пользователю (скажем, 15px).

Код у меня следующий: 

<div id="question" >
    What month is it?
    <div style="padding-right: 15px;" id="options">
        <input type="radio" name="question1" />Jan
        <input type="radio" name="question1" />Feb
        <input type="radio" name="question1" />May
        <input type="radio" name="question1" />Dec
    </div>
</div>

Я думал, что добавление отступа справа добавит дополнение к каждой из переключателей внутри параметров div id. Тем не менее, это только добавление отступов ко всему div.

Какой лучший способ справиться с этим?

Ответы [ 4 ]

3 голосов
/ 23 мая 2009

Вы можете добавить следующее правило: 

div#options input { padding-right: 15px }

Это добавит отступ справа от каждого элемента input под div с идентификатором options

ОБНОВЛЕНО: в этом примере "id" используется несколько раз. Идентификаторы должны быть уникальными, поэтому классы будут более подходящими. Смотрите следующий пример: 

div.options input { padding-right: 15px; }
<div class="options">
    <input type="radio">...

Класс можно использовать повторно для других элементов, которые вы хотели бы использовать в том же стиле.

1 голос
/ 24 мая 2009

Я думаю, что корень проблемы в HTML, а не в CSS.

Ваш HTML не так хорош / полезен, как мог бы быть. Вы представляете список месяцев, поэтому отметьте их, используя список: 

<ol id="options" class="formList">
   <li>
      <input type="radio" name="question1" />Jan
   <li/>
   ....
</ol>

Побочным эффектом того, что теперь это хороший семантический HTML, является то, что он дает вам все правильные возможности для вашего стиля. Каждая часть формы имеет свой собственный элемент, что делает применение CSS намного проще - чтобы добавить пространство вокруг элементов списка, используйте что-то вроде: 

.formList li {margin:15px;}

// не по теме:

Вы действительно должны добавить элементы метки в свою разметку. Использование элементов меток в формах явно связывает текстовую метку элемента формы с этим элементом формы, делая сайт более доступным и удобным - пользователь может щелкнуть текст, чтобы активировать переключатель, который дает им большую цель, делая ваши формы более привлекательными ваши пользователи счастливее. 

<label><input type="radio" name="question1" />Jan</label>

или 

<input type="radio" id="radio1" name="question1" /><label for="radio1">Jan</label>
1 голос
/ 23 мая 2009

Следует помнить, что inline style будет применяться к элементу, в теге которого он определен. Чтобы повлиять на входы, вам нужно нацелить их напрямую (demo: 1), либо добавив к ним class, нацеливаясь на все входы (demo: 2), либо, как предполагает jthompson, нацелить на те входы, которые являются потомками конкретного div (см. ответ Jthompsons).

    1. `input {padding-right: 15px; } `или
    2. `input [type =" radio "] {padding-right: 15px; } `// это только CSS3, я думаю.
  2. добавить `class =" q1-radio-Input "` и использовать CSS `.q1-radio-input {padding-right: 15px; } `

Стоит также отметить, что использование встроенных стилей не имеет особого смысла, за исключением случаев, когда необходимо переопределить конкретный стиль только один раз, всегда (насколько я могу судить) разумнее использовать внешний лист, чтобы для кэширования (если не для чего-то еще) и для облегчения воздействия на все стили при редизайне / переработке сайта.

И, как дополнение, стили применяются в следующем порядке: inline-stlyes переопределяет стили, определенные в заголовке, которые в свою очередь переопределяют внешние таблицы стилей. Если стиль не определен маркером !important, в этом случае он не переопределяется (все исправно).

Помогает следующее (вроде): http://www.w3.org/TR/CSS2/cascade.html

<ч />

Отредактировано в ответ на комментарии: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<style type="text/css" media="screen">
.div#options input { padding-right: 15px }
</style>
</head>
<body>
<div id="question" style="padding-bottom: 15px">
    What day is it today?
    <div id="options">

        <input type="radio" name="question1" />Sunday
        <input type="radio" name="question1" />Monday
        <input type="radio" name="question1" />Saturday
        <input type="radio" name="question1" />Tuesday
    </div>
</div>

<div id="question" >
    What month is it?
    <div id="options">
        <input type="radio" name="question1" />Jan
        <input type="radio" name="question1" />Feb
        <input type="radio" name="question1" />May
        <input type="radio" name="question1" />Dec
    </div>

</div>

</html>

Если приведенный выше html остается представителем вашего сайта (как указано в комментариях к этому ответу), проблема может быть в следующем:

.div#options

точка используется для обозначения class имени, фунт '#' используется для обозначения div имени, и только одно или другое можно использовать одновременно: 

div.options /* is fine, indicating a 'div' of class-name 'options' */
div#options /* is also fine (and both within the same document is, also, fine) indicating a div of id-name 'options' - an id is unique, and can be used only *once* per document */

.div#options /* could be fine, but appears to be targeting an element of id-name 'options' within an element of class-name 'div,' which is not found within your document. */
1 голос
/ 23 мая 2009

Ваш код просит браузер разместить 15px отступов справа от DIV, поэтому вам нужно быть более точным с вашим объявлением CSS: 

#options input { padding-right:15px; }

Если вы поместите это между тегами стилей или в таблицу стилей, все должно получиться именно так, как вы хотите.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...