Question

我似乎无法将我的社交媒体图标正确放入导航栏。我在所有东西周围设置了边框，因此更容易看到内部的内容。我不明白为什么社交媒体图标位于导航栏下方。我想让图标进入导航栏，并且所有图标都向左移动到＆lt; div id =“nav-left”＆gt;。非常感谢任何帮助。

Imgur问题：http://imgur.com/UKojBYx

我的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;
}

Answer 1

看来ul（默认情况下）有一些额外的填充用于导航链接。你需要手动清空你的导航器的所有填充/边距（充满社交媒体图标），以便很好地坐在另一个盒子里..

你可以通过添加以下两行

专门为你的导航做（不影响其他任何事情）

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

Answer 2

使用

*{
 padding:0;
 margin:0;
}

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

希望这能解决您的问题。

Answer 3

将显示属性更改为.nav ul类中的内联，并将float：left设置为.nav-left li class。

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

Answer 4

只需在nav-left，nav-right

中给出样式

height:auto;display:block

如何修复我的导航栏

4 个答案: