Положение на 2 деления рядом друг с другом

0

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

Теперь у меня есть форма

        <form action="#" method="POST">
            <div id="labels">
    <label>CMS Systeem</label><p>
    <label>Responsive Design</label><p>
    <label>Google Pakket+</label><p>
    <label>Google Ranking</label><p>
    <label>Slider/Diavoorstelling</label><p>
    <label>Social Media</label><p>

<div id="input">
<input type="text" name="pagina" value="1"><p>
Ja<input type="radio" name="cms" id="cmsja" value="ja"/> Nee<input type="radio" name="cms" value="nee" id="cmsnee" checked/><p />
Ja<input type="radio" name="Responsive" value="ja"/> Nee<input type="radio" name="Responsive" value="nee" checked/><p />
Ja<input type="radio" name="Googlep" value="ja"/> Nee<input type="radio" name="Googlep" value="nee" checked/><p />
Ja<input type="radio" name="Googletop" value="ja"/> Nee<input type="radio" name="Googletop" value="nee" checked/><p />
Ja<input type="radio" name="slider" value="ja"  /> Nee<input type="radio" name="slider" value="nee" checked/><p />
Ja<input type="radio" name="socials" value="ja" id="mediaja" /> Nee<input type="radio" name="socials" value="nee" id="medianee" checked/><p />
            </div>
    </form>

я хочу

#input {
      next to #labels instead of under #input

}

Я исправил его с margin: -xxxpx; но у меня есть идея, что не лучший способ сделать это.

JSFiddle http://jsfiddle.net/tAVGC/

  • 0
    Можете ли вы опубликовать свой код в JSFiddle или что-то? Я понятия не имею, что вы пытаетесь сказать, что вы хотите.
  • 0
    Готово jsfiddle.net/tAVGC
Показать ещё 1 комментарий
Теги:

5 ответов

1
Лучший ответ

Пара вещей:

Ваш <div id="labels" > нужен тег закрытия </div>.

Кроме того, тегам <p> нужен открытый и закрывающий тег, например <p></p>

И вам нужно быть последовательным в КАЖДОМ элементе, получающем <p> если это так, как вы надеетесь выстроить их. В идеале вы хотели бы, чтобы надбавка была такой:

<label>CMS System</label><input type="radio" name="cms" />

Таким образом, они будут бок о бок в HTML и визуально. Если вам нужны они в двух отдельных контейнерах <div>, попробуйте это:

http://jsfiddle.net/sk6gz/1/

Кажется, что существует расхождение между ними, поэтому добавьте дополнительный <p> в первый или второй контейнер <div> чтобы получить то, что, как я считаю, вы ищете.

Поделиться
  • 1
    Я думаю, что все использование тегов p здесь противоречит семантической разметке и неуместно. Есть лучшие способы сделать разрывы строк, и закрытие их (создание пустых абзацев) не является ответом. Кроме того, если вы используете p «надеясь выстроить их в ряд», вы не следуете передовым методам, которые для этого будут использовать CSS (желательно с внешней связью).
  • 0
    Я не собираюсь спорить с тобой. Я никогда не получу свою наценку таким образом, но я просто пытаюсь выполнить запрос OP.
Показать ещё 2 комментария
2

http://jsfiddle.net/BURR2/

#labels { float: left; margin-right: 10px; }

Кроме того, закройте теги.

В качестве дополнительной заметки о стилизации с идентификаторами я бы рекомендовал вместо этого использовать классы. Эта статья Криса Койера является хорошей и связывает некоторые другие хорошие ресурсы.

Поделиться
0

Более элегантная с меньшей разметкой

label{
display:inline-block;
width:150px;
}

http://jsfiddle.net/tAVGC/10/

Поделиться
0

Похоже, вы пытаетесь создать своего рода CMS?

Прежде всего, чтобы узнать, как позиционировать элементы с CSS, я бы сделал несколько поисков терминов css box model. Это должно дать некоторые хорошие результаты, объясняющие, как расположить друг друга рядом друг с другом.

Теперь к вашей проблеме. Я предполагаю, что вы хотите что-то вроде этого: JSFiddle

Сначала вы поместили все метки в разметку, а затем все элементы управления (переключатели), но здесь нужно сгруппировать их: ярлык и управление для каждого вопроса:

<label>CMS Systeem</label>
Ja<input type="radio" name="cms" id="cmsja" value="ja"/> 
Nee<input type="radio" name="cms" value="nee" id="cmsnee" checked="checked" />
<br/>

Я использовал элемент <br/> который немного быстрый и грязный. Вышеупомянутая модель коробки даст вам гораздо лучший контроль над позиционированием.

Я также думаю, что вы должны искать такие вещи, как html forms

Наконец, как новичок, CMS может быть немного амбициозным. Почему бы не начать меньше?

Поделиться
0

Для элементов формы такая вещь может работать хорошо:

HTML:

<label>CMS System</label><input type="radio" name="cms" />
<label>Your feelings</label><input type="text" name="feelings" />

CSS:

label, input[type=text] { display:inline-block; text-align: right; }
label { width: 30%; margin-right: 2%; }
input, input[type=text] { width: 60%; }

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

См. Пример здесь: http://jsfiddle.net/harveyramer/E7kSt/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню