Question

这是我关于堆栈溢出的第一篇文章，所以如果我做错了请告诉我:)。

这是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个元素：一个图像和四个链接。我试图让导航条上的apear对齐，每个元素都向右浮动，释放第一个（图像）向左漂浮，并应调整大小以适应10％导航。

这应该是非常基本的。我刚开始编写网络代码。只要它们是更好的解决方案，也欢迎替代方案。

Answer 1

对不起，我错过了关于漂浮img的事情......

使用/＆gt;清理html以关闭IMG标记;然后添加一个类或内联css以将包含img的div浮动到左侧..

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

或

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

.FloatLeft
{
  float: left;
}

或像这样改变css

nav div:first-child {
    float:left;
}

Answer 2

只需从

更新你的CSS

nav:first-child {
    float:left;
}

到

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

DEMO

Answer 3

您还可以使用CSS表格来执行导航栏。我发现它们有很多不错的属性，例如用均匀间隔的导航项填充整个宽度，并且是well supported in all modern browsers。它们甚至可以很好地处理各种语义标记，包括列表链接。

鉴于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;
}

DEMO

如何让一些div对齐导航？

3 个答案: