HTML Выровняйте DIV Children Horizontally

Question

Я очень новичок в разработке HTML и CSS. Я хотел, чтобы все дети в моем сНу родителя выравнивать по горизонтали

Мой HTML:

<div class="parent"> 
     <h1>Hello</h1> 
     <h1>World</h1> 
</div> 

Я попытался с помощью inline-block на .parent как другие предложили, но все-таки выход:

Hello 
World 

вместо

Hello World 

любые идеи?

Answer 1

Недвижимость, которую вы ищете, это display: inline;, это сделает каждый тэг рендерингом, как будто он «встроен друг в друга».

.parent h1 { 
    display: inline; 
} 

Вы также могли плавать теги, но я бы не делать этого, поскольку это нарушило бы поток текста, если бы вы добавить любые другие теги в .parent контейнере.

Example JSfiddle

Answer 2

Рассмотрим глядя на float:left.

.parent h1 { 
 
    float:left; 
 
}

<div class="parent"> 
 
    <h1>Hello</h1> 
 
    <h1>World</h1> 
 
</div>

Или даже display:inline

.parent h1{ 
 
    display:inline; 
 
    }

<div class="parent"> 
 
    <h1>Hello</h1> 
 
    <h1>World</h1> 
 
</div>

Имейте в виду, что использование float не рекомендуется здесь, потому что если вы добавляете новый элемент в .parent DIV это будет ppear рядом с элементами h1, потому что они плавают влево. +1 для @MathiasaurusRex для указания этого.

Answer 3

Вам не нужно выровнять DIV, но нужно выровнять h1-х: В вашем CSS кода добавить:

h1 { display: inline; } Fiddle here

Answer 4

Одна вещь, чтобы отметить здесь Ваш выбор теги h1 для детей неправильно, заголовки вставляют пустую строку до и после заголовка. Поскольку ваш мотив состоит только в том, чтобы показать, что тег заголовка текста не является правильным тегом выбора.