如何修复我的导航栏答案

【问题标题】：How to fix my navigation bar如何修复我的导航栏
【发布时间】：2014-09-01 05:40:10
【问题描述】：

我似乎无法让我的社交媒体图标正确地放入导航栏。我在所有东西周围都设置了边界，所以更容易看到里面有什么。我不明白为什么社交媒体图标位于导航栏下方。我希望图标出现在导航栏中，并希望所有图标在内向左移动。非常感谢任何帮助。

我的 HTML 代码：

<!DOCTYPE html>
<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
         <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
        <link rel="stylesheet" href="Website(CSS).css" type="text/css" media="screen" title="no title" charset="utf-8">
        <title>Website</title>
    </head>
    <body>
        <div class="nav">
            <div class="container" id="nav-left">
                <ul class="nav-left">
                    <li id="twitter"><a href="http://twitter.com/#"><img src="Twitter.png" width="40" height="40" alt="Twitter" /></a></li>
                    <li id="instagram"><a href="http://instagram.com/#"><img src="Instagram.png" width="40" height="40" alt="Instagram"/></a></li>
                    <li id="quora"><a href="http://quora.com/#"><img src="Quora.jpg" width="80" height="35" alt="Quora" /></a></li>
                </ul>
            </div>
            <div class="container" id="nav-right">
                <ul class="nav-right">
                    <li id="future-plans"><a href="insert link">Future Plans</a></li>
                    <li id="contact"><a href="inset link">Contact</a></li>
                </ul>
            </div>  
        </div>

我的 CSS 代码：

/* Get the whole box of social image links to be closer to the left border. 
Get the .nav-right to have better font, bigger font, and to pushed a little more to the left of the nav box. */

body {
    border: 2px solid green;
}

/* Navigation Bar */
.nav {
    height: 7%;
    width: 98%;
    top: 0;
    z-index: 10;
    position: fixed;
    background-color: white;
    border: 2px solid blue;
}

.nav ul {
    display: inline-block;
}



/* Left Side Navigation Container */
#nav-left {
    height: 100%;
    top: 0;
    left: 0;
    float: left;
    border: 2px solid red;
}

.nav-left li  {
    display: inline-block;
    border: 2px solid black;
    padding: 5px;
}



/* Right Side Navigation Container */
#nav-right {
    height: 100%;
    top: 0;
    right: 0;
    float: right;
    border: 2px solid red;
}

.nav-right li {
    display: inline-block;
    border: 2px solid black;
    margin: auto;
    padding: 6px;
}

【问题讨论】：

标签： html css uinavigationbar

【解决方案1】：

似乎 ul 上有一些额外的填充（默认情况下）用于您的导航链接。您需要手动取消导航器的所有填充/边距（充满社交媒体图标）才能很好地坐在另一个盒子里..

您可以通过添加下面的两行来专门为您的导航（而不影响其他任何内容）执行此操作

.nav ul {
    display: inline-block;
    padding: 0px;  // make sure there's no padding
    margin: 0px;   // and no margin
}

【讨论】：

【解决方案2】：

使用

*{
 padding:0;
 margin:0;
}

它将删除所有块元素的所有额外填充和边距。

希望这能解决您的问题。

【讨论】：

【解决方案3】：

在 .nav ul 类中将 display 属性更改为 inline 并将 float:left 设置为 .nav-left li 类。

http://jsfiddle.net/3zc9mtnx/

body {
border: 2px solid green;
}

/* Navigation Bar */
.nav {
height: 7%;
width: 98%;
top: 0;
z-index: 10;
position: fixed;
background-color: white;
border: 2px solid blue;
}

.nav ul {
display: inline;
} 



/* Left Side Navigation Container */
#nav-left {
    height: 100%;
    top: 0;
    left: 0;
    float: left;
    border: 2px solid red;
}

.nav-left li  {
    display: inline-block;
    border: 2px solid black;
    padding: 5px;
    float:left;
}



/* Right Side Navigation Container */
#nav-right {
    height: 100%;
    top: 0;
    right: 0;
    float: right;
    border: 2px solid red;
}

.nav-right li {
    display: inline-block;
    border: 2px solid black;
    margin: auto;
    padding: 6px;
}

【讨论】：

【解决方案4】：

只需在 nav-left,nav-right 中给出样式

height:auto;display:block

【讨论】：