Правильный способ позиционирования элементов с помощью CSS

Question

Привет, я хочу разместить мою навигацию рядом с именем моего сайта в заголовке, однако его оказалось трудно, и мне пришлось использовать позицию: absoutle и marginins, но я должен войти в минус номера, чтобы это выглядело правильно.

Мне было интересно, существует ли более простой способ заставить их появляться бок о бок?

Нажмите здесь, чтобы посмотреть JSFiddle!

Или посмотреть мой код ниже:

index.html

<header> 
<h1>iManage</h1> 
<nav> 
    <ul class="maina"> 
     <li><a href="Home">Home</a></li> 
     <li><a href="Projects">Projects</a></li> 
     <li><a href="Settings">Settings</a></li> 
    </ul> 
</nav> 
    </header> 

style.css

header { 
width:auto; 
height:50px; 
background-color:#374348; 
} 

header > h1 { 
font-size:16px; 
font-weight:bold; 
text-align:left; 
color:#FFF; 
padding:10px; 
} 


.maina > li { 
display:inline; 
list-style:none; 
} 

header > nav { 
text-align:center; 
width:300px; 
height:auto; 
border:medium #999; 
position:absoulte; 
top:0; 
margin: -50px 0px 0px 60px; 
} 

Answer 1

Ну, это правильный способ сделать это ...

Пояснение: Вам необходимо указать floath1 на номер left , то же самое касается и nav элементов, а теперь, что float будет делать? Он будет float вашего элемента в left здесь, который создаст пустое пространство справа от элемента с плавающей точкой, что сделает некоторое пространство для смещения вашего nav, и я использую .clear:after, чтобы очистить родительский элемент, вы можете использовать overflow: hidden; тоже вместо .clear:after (Потому что IE испортит вашу игру здесь) ...

вы также можете прочитать this мой ответ, который объяснит вам концепцию для очистки ваших плавающих элементов с помощью clear: both; и почему вам нужно, чтобы очистить их ,

Demo

header { 
    width:auto; /* You don't need this too */ 
    height:50px; 
    background-color:#374348; 
} 

header > h1 { 
    font-size:16px; 
    font-weight:bold; 
    float: left; 
    color:#FFF; 
    padding:10px; 
} 


.maina > li { 
    display:inline; 
    list-style:none; 
} 

header > nav { 
    width:300px; 
    height:auto; 
    border:medium #999; 
    float: left; 
    margin: 10px; 
} 

.clear:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

Советы: Как правило, вы хотели бы иметь margin и padding на ваших пунктов меню, я хотел бы предложить вам использовать display: inline-block; вместо block, также вы можете избавиться от > если вы действительно не находят необходимости использовать это.

---

Последнее, но не менее, вы используете header, который HTML5 элемент, поэтому убедитесь, что вы используете HTML5 Reset таблицы стилей, которые будут декларировать другие элементы, такие как footer, aside, nav, как display: block; сказать, например, HTML5 Doctor Stylesheet Reset

Answer 2

Вы можете использовать float: left; Чтобы это стало легче, узнайте об этом здесь: http://www.w3schools.com/css/css_float.asp

Answer 3

Вы можете установить как 'h1', так и 'nav' для отображения: inline-block.

Answer 4

У вас есть два варианта: во-первых, вы можете установить как элементы H1, так и Nav для float: left, но не забудьте очистить: оба элемента, следующие за тегом заголовка. Удалите позицию: абсолютная, верхняя: 0 и маржа, и вам должно быть хорошо идти.

Дайте мне знать, как вы поживаете. AJ