Html 我如何使一些div在导航上对齐？_Html_Css_Header_Nav

Html 我如何使一些div在导航上对齐？

html css

Html 我如何使一些div在导航上对齐？,html,css,header,nav,Html,Css,Header,Nav,这是我关于堆栈溢出的第一篇文章，所以如果我做错了什么，请通知我：）这是HTML： <nav> <div><img src="images/logo.png"</div> <div>Noticias</div> <div>Eventos</div> <div>Alumnos</div> <div>Contacto</div> </nav> <

这是我关于堆栈溢出的第一篇文章，所以如果我做错了什么，请通知我：）

这是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>

<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>

这是小提琴

我的导航有5个元素：一个图像和四个链接。我试图使apear在导航栏上对齐，每个元素都向右浮动，除了第一个元素（图像）向左浮动，应该调整大小以适应10%的导航

这应该是很基本的。我刚开始编写网页代码。只要是更好的解决方案，替代方案也是受欢迎的。

对不起，我错过了将img向左浮动的部分

清理html以使用/>关闭IMG标记，然后添加类或内联css以将包含IMG的div浮动到左侧

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

只需从更新YOUR或css即可

nav:first-child {
    float:left;
}

到

您还可以使用CSS表格来创建导航栏。我发现它们有很多很好的特性，比如用等距的导航项填充整个宽度，并且是。它们甚至可以很好地处理各种语义标记，包括列表链接

给定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>

<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>

在JS Fiddle中，我刚刚关闭了img标签，它为我排列好了。。在“/>”中添加了个人使用

的尝试，我宁愿向我想要特别向左浮动的div添加一个类。这样，如果需要的话，我可以对另一个元素再做一次，但这取决于你。谢谢，整个问题是图像标签，嗯。很高兴知道我在这里得到了这么多帮助！

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

<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>

@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;
}