Создать 2 элемента внутри div

Question

Создать 2 элемента внутри div

0

Мне нужно создать 2 элемента внутри блока, но по какой-то причине "Имя" и "Боб" перемещаются в другую строку.

HTML

<div class=".div" style="padding-left: 50px">
        <h3 style="padding-right: 5px;float: left;padding-bottom: 23px;">Name:</h3>
        <span class="pt_name" style="block">Bob</span>
</div>

CSS

#div{
    height:100px;
    width:100%;
    background-color:green
}

играть на скрипке

http://jsfiddle.net/LMKw7/

user1050619 17 дек. 2013, в 21:19

Источник

Теги:

html

css

4 ответа

Ещё вопросы

Katana314 · Answer 1 · 2013-12-17T19-08-00.000Z

Две вещи:

Мне повезло, что на display: inline-block; h3 вместо " float: left " было установлено значение " display: inline-block; ".

Что касается "div" - вы можете смутить себя, назвав ваши селекторы после типов элементов. В любом случае, классы обычно не имеют точек в них - точка просто помещается в CSS для выбора по классу. Тег # предназначен для идентификаторов. Итак, правильный взгляд будет таким:

<div class="myDiv"...

(CSS):

.myDiv {

Tom Pietrosanti · Answer 2 · 2013-12-17T18-24-00.000Z

h3 имеет неявный margin-top из таблицы стилей по умолчанию в браузере, которая отталкивает ее. Просто установите margin-top: 0 и вы увидите улучшение.

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

Zword · Answer 3 · 2013-12-17T17-46-00.000Z

Использовать display:inline-block;

Также из-за разного размера шрифта, который <h3> и <span> обнаружил, что текст внутри <span> находится на новой строке. Я отредактировал вашу скрипку. Может быть, это может вам помочь:

http://jsfiddle.net/LMKw7/2/

Fengson · Answer 4 · 2013-12-17T17-09-00.000Z

Вы отправили стили в div с id div потому что вы использовали # в начале. Если вы хотите добавить его в каждый div, просто используйте div {... }.