Html 如何修复我的导航栏,html,css,uinavigationbar,Html,Css,Uinavigationbar,我似乎无法将我的社交媒体图标正确地放入导航栏。我在所有东西周围都设置了边界，这样更容易看到里面的东西。我不明白为什么社交媒体图标在导航栏下面。我希望图标出现在导航栏中，所有图标在中向左移动。非常感谢您的帮助
问题的症结：
我的HTML代码：
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Crimson+Text' r
中向左移动。非常感谢您的帮助
问题的症结：
我的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>
/* 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;
}
使用
它将删除所有块元素的所有额外填充和边距
希望这能解决您的问题。在用于导航链接的ul（默认）上似乎有一些额外的填充。
您需要手动清空导航器（满是社交媒体图标）的所有填充/空白，以便更好地放置在另一个框中
通过添加下面的两行，您可以专门为您的导航执行此操作（不影响任何其他操作）
.nav ul {
display: inline-block;
padding: 0px; // make sure there's no padding
margin: 0px; // and no margin
}
将display属性更改为inline in.nav ul class并将float:left设置为.nav left li class
只需在导航左，导航右的风格
height:auto;display:block
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;
}
height:auto;display:block