Как я могу выровнять некоторые элементы div в навигации?

Это мой первый пост о переполнении стека, поэтому, если я сделаю что-то не так, сообщите мне :).

Это HTML:

<nav>
<div><img src="images/logo.png"</div>
<div>Noticias</div>
<div>Eventos</div>
<div>Alumnos</div>
<div>Contacto</div>
 </nav>
<div id="content">
<h3><span class="green">Noticias |</span> Los comunicados y anuncios <span class="green">oficales</span> de la institución</h3>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec magna pulvinar, posuere lacus nec, suscipit risus. Nunc vitae sollicitudin nisl.</p>

И CSS:

@import url(http://fonts.googleapis.com/css?family=Comfortaa);     *{border:1px dotted black;}

html {
    background-color: #FFFFFF; 
    min-height: 2000px;

}

body {
    color: #1F4F75;
    font-family: Comfortaa, sans-serif;
}

nav {
    height: 10%;
    width:100%;
    position: fixed;
    box-shadow: 0px 10px 10px #888888;
    background-color: #FFFFFF;
    display: block;
}

nav div {
    display: block;
    float:right;
    height: 100%;
    font-size: 25px;

}

nav:first-child {
    float:left;
}

#content {
    width: 70%;
    margin: auto;
    margin-top: 7%;


}
.green {
    color:#91BA30;
}

h3 {
    font-size: 25px;
    text-align: center;
    font-weight: 700;
}
p {
    line-height: 1.4;
    font-size: 17px;
    text-align: justify;
    color: #1F4F75;
    font-weight: 400;
}

Это скрипт http://jsfiddle.net/LuTLm/.

Моя навигация состоит из 5 элементов: изображения и четырех ссылок. Я пытаюсь выровнять внешний вид на панели навигации, при этом каждый элемент плавает вправо, кроме первого (изображение), которое плавает влево и должно быть изменено, чтобы соответствовать 10% навигации.

Это должно быть довольно просто. Я только начинаю кодировать веб. Альтернативы также приветствуются, если они действительно являются лучшими решениями.


html css header nav
person TianRB    schedule 08.01.2014    source источник
comment
В JS Fiddle я просто закрыл тег img, и он выровнялся для меня.   -  person Ads    schedule 08.01.2014
comment
Попробуйте с <ul><li> см. демонстрацию   -  person Black Sheep    schedule 08.01.2014

Ответы (3)


arrow_upward
0
arrow_downward

Извините, я пропустил немного о плавании левого изображения ..

очистите html, чтобы закрыть тег IMG с помощью />, а затем либо добавьте класс, либо встроенный css, чтобы разместить div, содержащий img, слева.

<div style='float:left'><img src="images/logo.png" /></div>

or

<div class='FloatLeft'><img src="images/logo.png" /></div>

.FloatLeft
{
  float: left;
}

или измените css следующим образом

nav div:first-child {
    float:left;
}
person Ads    schedule 08.01.2014
comment
лично я бы предпочел добавить класс в div, который я хочу специально перемещать влево. Таким образом, я могу сделать это снова с другим элементом, если мне нужно, но это зависит от вас. - person Ads; 08.01.2014
comment
Спасибо, вся проблема была в теге изображения, да. Приятно знать, что мне здесь так много помогают! - person TianRB; 11.01.2014

arrow_upward
0
arrow_downward

Просто обновите свой css из

nav:first-child {
    float:left;
}

to 

nav div:first-child {
    float:left; // make it float left
    width: 10%; // resize it to 10% width
}

ДЕМО

person Raunak Kathuria    schedule 08.01.2014

arrow_upward
0
arrow_downward

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

Учитывая HTML:

<body>
    <nav>
        <div>
            <img src="images/logo.png">
        </div>
        <div>Noticias</div>
        <div>Eventos</div>
        <div>Alumnos</div>
        <div>Contacto</div>
    </nav>
    <div id="content">

<h3><span class="green">Noticias |</span> Los comunicados y anuncios <span class="green">oficales</span> de la institución</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec magna pulvinar, posuere lacus nec, suscipit risus. Nunc vitae sollicitudin nisl.</p>

Вы должны использовать следующий CSS:

@import url(http://fonts.googleapis.com/css?family=Comfortaa);
 html {
    background-color: #FFFFFF;
    min-height: 2000px;
}
body {
    color: #1F4F75;
    font-family: Comfortaa, sans-serif;
}
nav {
    height: 10%;
    width:100%;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0px 10px 10px #888888;
    background-color: #FFFFFF;
    display: table;
    table-layout: auto;
}
nav div {
    display: table-cell;
    font-size: 25px;
    vertical-align: middle;
}
nav div:first-child {
    width: 10%;
}
#content {
    width: 70%;
    margin: auto;
    margin-top: 7%;
}
.green {
    color:#91BA30;
}
h3 {
    font-size: 25px;
    text-align: center;
    font-weight: 700;
}
p {
    line-height: 1.4;
    font-size: 17px;
    text-align: justify;
    color: #1F4F75;
    font-weight: 400;
}

ДЕМО

person James O'Doherty    schedule 08.01.2014