Question

如何将徽标与导航栏对齐？

我的HTML代码是：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="icon" type="image/png" href="SENCOR_Logo.ico">
<title>SENCOR</title>
</head>
<body>
<div class="bg-div">
    <img class="logo-img" src="SENCOR_Logo.jpg" ALT="align box" ALIGN=CENTER>
    <nav>
        <ul>
            <li><a href="#">Monitoring</a></li>
            <li><a href="#">Process</a></li>
            <li><a href="#">Post and Create Email/Excel</a></li>
            <li><a href="#">Reports</a></li>
            <li><a href="#">Tools</a></li>
            <li><a href="#">Sales</a></li>
        </ul>
    </nav>
</div>
</body>
</html>

继承我的style.css代码：

body{
    margin: 0;
    padding: 0;
    font-size: 15px;
}

/* Navigation */
nav{
    margin: 0;
    overflow:hidden;
    text-align: center;
}

nav ul{
    margin: 0;
    padding: 0;
}

nav ul li{
    display: inline-block;
    list-style-type: none;
}

nav > ul > li > a{
    color: #aaa;
    display: block;
    line-height: 2em;
    padding: 0.5em 1em;
    text-decoration: none;
}
-----------
.logo-img{
    position: relative;
    margin: 10px 15px 15px 10px;
}
.bg-div{
    background:#333;
}

我想在左侧显示徽标，在右侧显示导航栏。

Answer 1

这是一支笔：

http://codepen.io/toddmoore/pen/JGvVpB

.logo-img {
    float: left;
    position: relative;
    margin: 10px 15px 15px 10px;
}
.bg-div {
   overflow: hidden;
}
nav {
    float: left;
}

我假设您希望以传统方式设置它们。如果您希望导航位于页面的另一侧float right。

你也可以使用flex来实现这一点，但是现在如果你是css的新手，我会坚持float。

overflow hidden允许两个浮动元素的容器扩展到它们的高度，否则因为浮动文件会逃逸容器折叠的文档流。

Answer 2

最简单和最基本的答案是，使用浮动。

.logo-img {
    float: left;
}
nav {
    float: right;
}

Answer 3

通常情况下，使用＆＃34; position：fixed;＆＃34;用于顶部的导航栏。所以，你的css可以这样做：

myManager.Dosomethingelse(tbox_data,stringYouWantToAdd);

如何对齐左侧的徽标和右侧的导航？

3 个答案: