Более элегантный способ выравнивания нескольких div в навигационной панели?

Я только начал играть с HTML и CSS несколько недель назад и был бы признателен за помощь. Я ищу элегантный способ выравнивания нескольких элементов в заголовке.Более элегантный способ выравнивания нескольких div в навигационной панели?

Я не знаком с использованием сеток. Я попытался использовать display: inline-block и display: table, но я не получил его, чтобы работать так, как Id. Поэтому мне пришлось использовать поплавки, которые работают, но я чувствую себя вынужденным.

Id также хотел бы, чтобы содержимое отображалось в том же диапазоне, что и .nav-content, но я думаю, что 55% контейнера будет отличаться от 55% заголовка?

В любом случае, Heres код:

* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    max-width: 100%; 
 
    height: 100%; 
 
} 
 
/****************************************** 
 
Header/Navbar 
 
*******************************************/ 
 

 
.navigation { 
 
    width: 100%; 
 
    border-bottom: solid 1px #eee; 
 
    position: fixed; 
 
    Z-Index: 500; 
 
    font-size: 14px; 
 
    box-sizing: border-box; 
 
    font-weight: 400; 
 
    font-style: normal; 
 
    line-height: 1.6; 
 
    min-height: 65px; 
 
    padding-top: 10px; 
 
} 
 
.nav-content { 
 
    width: 55%; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.nav-logo, 
 
.navigation li { 
 
    float: left; 
 
} 
 
.nav-right, 
 
.nav-btn { 
 
    float: right; 
 
} 
 
.nav-left { 
 
    font-size: 26; 
 
    padding-left: 1%; 
 
    padding-top: 0.5%; 
 
} 
 
.nav-left li { 
 
    margin-right: 1%; 
 
    margin-left: 1%; 
 
} 
 
.navigation ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.nav-right { 
 
    padding-right: 1%; 
 
    margin-top: -25px; 
 
}

<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="description" content="We are medium. We write about startups."> 
 
    <meta name="keywords" content="Medium, blogging, startups, entrepreneurship, Unternehmer, Gründung, Unternehmensgründung, gründen, Venture Capital, Business Angel, Investor, Wagniskapital, Risikokapital"> 
 
    <meta name="author" content="William Middendorf"> 
 
    <meta name="robots" content="index, follow"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <title>Medium</title> 
 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css'> 
 
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> 
 
    <link rel="stylesheet" href="css/normalize.css"> 
 
    <link rel="stylesheet" href="css/style.css"> 
 
    <link rel="icon" href="img/favicon.ico" type="image/x-icon"> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="navigation"> 
 
     <!--Navigation--> 
 
     <div class="nav-left"> 
 
     <ul> 
 
      <li><i class="fa fa-bars"></i> 
 
      </li> 
 
      <li><i class="fa fa-search"></i> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="nav-content"> 
 
     <div class="nav-logo">Blogger</div> 
 
     <div class="nav-btn"> 
 
      <button class="wrt-btn">Schreib' einen Artikel</button> 
 
     </div> 
 
     </div> 
 
     <div class="nav-right"> 
 
     <ul> 
 
      <li><a href="#" style="cursor: auto;">Log In</a> 
 
      </li> 
 
      <li><a href="#" style="cursor: auto;">Register</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <!--End of Navigation/Header--> 
 

 
    </div> 
 
    <!--End of Container--> 
 
</body>

источник

2015-10-08 WilliamJohn

У вас есть jsBin для показа? –

Нет ничего плохого в поплавках, и «более элегантный» довольно субъективен. Если CSS работает, он работает. –

Я не использую JS – WilliamJohn

Float плохой путь здесь. Если это необходимо, вы не сможете центрировать их позже в мобильном режиме.

Используйте display: inline-block; и не оставляйте пробелы или новые строки, это html-код между кнопками, чтобы избежать разрыва между ними.

источник

2015-10-08 15:44:40

«не сможет их центрировать» - был бы эффективен медиа-запрос с 'float: none'.Нет ничего плохого в поплавках, особенно если вы хотите размещать контент. Ваша заметка о пробелах в разметке, на мой взгляд, подсказывает, что подход не самый лучший. –

При использовании дисплея: inline-block, я просто добавляю поля, чтобы разместить их где бы я ни захотел? Является ли это отзывчивым? Или я могу дать процентную ширину? И если да, то как я размещаю элементы на правой или левой стороне этой ширины? : confused – WilliamJohn

@WilliamJohn - добавление поля или определение ширины зависит от того, что вам нужно выполнить. Выровняйте элементы, определяя выравнивание текста по их родительскому элементу. –

с использованием inline-block и процентов по процентам и text-align, вы можете избежать использования поплавков и полей. Вот демонстрационная версия: http://jsfiddle.net/swm53ran/349/

.section, li, .nav-logo, .nav-btn { 
    display:inline-block; 
} 
.nav-left, .nav-right, .nav-content { 
    width: 32%; 
} 
.nav-right { 
    text-align: right; 
} 
.nav-logo, .nav-btn { 
    width: 49%; 
}

источник

2015-10-08 15:55:37 indubitablee

спасибо! должен ли я разделить раздел .nav-content? я хотел достичь той же ширины этого раздела со следующей основной областью содержимого, а выровнял кнопку справа и логотип, чтобы сайт был приятным и жидким. – WilliamJohn

вы можете просто настроить ширину '.nav-left',' .nav-right' и '.nav-content', чтобы разместить ширину содержимого следующим образом: http://jsfiddle.net/swm53ran/350/ – indubitablee

Более элегантный способ выравнивания нескольких div в навигационной панели?

ответ

Смежные вопросы