Html，Css，padding-top无效
导航中的填充顶部不合适 我想要这个
但我实际上得到了这个
这是我的html和css代码
＆＃13;
＆＃13;
＆＃13;
＆＃13;
ReplyInlineFormSet = inlineformset_factory(Question, Reply, extra=1, fields=('answer', ))
body{
background-image: url('img/bg.png');
color:#000305;
font-size:87.5%;
font-family:Arial, 'Licida Sans Unicode';
text-align:left;
}
a{
text-decoration:none;
}
a:link, a:visited{
}
a:hover, a:active{
}
.body{
clear:both;
margin: 0 auto;
width:70%;
}
.mainHeader img{
width:30%;
height:auto;
margin:2% 0;
}
.mainHeader nav{
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul{
list-style:none;
margin:0 auto;
}
.mainHeader nav ul li{
float : left;
display:inline;
}
.mainHeader nav a:link, .mainHeader nav a:visited{
color: #FFF;
display:inlin-block;
padding:10px 25px;
height:20px;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited{
background-color:#CF5C3F;
text-shadow:none;
}
.mainHeader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
为什么会这样？
5 个答案:
答案 0 :(得分：0)
您需要将ul css代码更改为：
.mainHeader nav ul {
list-style: none;
display: inline-block;
margin: 12px auto 0;
}
答案 1 :(得分：0)
这是一个有效的解决方案：避免使用float，并使用display：table-cell
body{
background-image: url('img/bg.png');
color:#000305;
font-size:87.5%;
font-family:Arial, 'Licida Sans Unicode';
text-align:left;
}
a{
text-decoration:none;
}
a:link, a:visited{
}
a:hover, a:active{
}
.body{
clear:both;
margin: 0 auto;
width:70%;
}
.mainHeader img{
width:30%;
height:auto;
margin:2% 0;
}
.mainHeader nav{
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul{
list-style:none;
margin:0 auto;
height: 40px;
display: table-cell; /*ADD THIS*/
vertical-align: middle; /*ADD THIS*/
}
.mainHeader nav ul li{
display: inline-block; /*ADD THIS*/
}
.mainHeader nav a:link, .mainHeader nav a:visited{
color: #FFF;
display:inlin-block;
padding:10px 25px;
height:20px;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited{
background-color:#CF5C3F;
text-shadow:none;
}
.mainHeader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML And CSS Responsive</title>
<meta charset="utf-8"/>
<link rel ="stylesheet" href="style.css" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="mainHeader">
<img src="img/css.jpg"/>
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Porfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="mainContent">
<div class="content">
<article title="top content">
<header>
<h2><a href="#" title="first post"> First post</a></h2>
</header>
<footer>
<p class="post-info">This text is written by christian</p>
</footer>
<content>
<p>This course is built to teach beginners how to start making applications in Android,
as well as for advanced devs to learn some of the advanced features available in Mobile Application Development.</p>
<p>It's a simple code along tutorial series where students can code while learning, which is found to be the most efficient way of learning these days.</p>
</content>
</article>
</div>
</div>
<aside class="top-sidebar">
<article>
<h2>Top sidebar</a></h2>
<p>This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.</p>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h2>Middle sidebar</a></h2>
<p>This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.</p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>Bottom sidebar</a></h2>
<p>This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.</p>
</article>
</aside>
<footer class="mainFooter">
<p>Copyrigt © 2016<a href="#" title="ferdaous.com">Ferdaous.com</a></p>
</footer>
</body>
</html>
body{
background-image: url('img/bg.png');
color:#000305;
font-size:87.5%;
font-family:Arial, 'Licida Sans Unicode';
text-align:left;
}
a{
text-decoration:none;
}
a:link, a:visited{
}
a:hover, a:active{
}
.body{
clear:both;
margin: 0 auto;
width:70%;
}
.mainHeader img{
width:30%;
height:auto;
margin:2% 0;
}
.mainHeader nav{
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul{
list-style:none;
margin:0 auto;
height: 40px; /*fix height*/
display: table-cell; /*display as table-cell*/
vertical-align: middle; /*center vertically*/
}
.mainHeader nav ul li{
display:inline-block; /*CHANGE To display-inline*/
}
.mainHeader nav a:link, .mainHeader nav a:visited{
color: #FFF;
display:inlin-block;
padding:10px 25px;
height:20px;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited{
background-color:#CF5C3F;
text-shadow:none;
}
.mainHeader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML And CSS Responsive</title>
<meta charset="utf-8"/>
<link rel ="stylesheet" href="style.css" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="mainHeader">
<img src="img/css.jpg"/>
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Porfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="mainContent">
<div class="content">
<article title="top content">
<header>
<h2><a href="#" title="first post"> First post</a></h2>
</header>
<footer>
<p class="post-info">This text is written by christian</p>
</footer>
<content>
<p>This course is built to teach beginners how to start making applications in Android,
as well as for advanced devs to learn some of the advanced features available in Mobile Application Development.</p>
<p>It's a simple code along tutorial series where students can code while learning, which is found to be the most efficient way of learning these days.</p>
</content>
</article>
</div>
</div>
<aside class="top-sidebar">
<article>
<h2>Top sidebar</a></h2>
<p>This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.</p>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h2>Middle sidebar</a></h2>
<p>This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.</p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>Bottom sidebar</a></h2>
<p>This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.</p>
</article>
</aside>
<footer class="mainFooter">
<p>Copyrigt © 2016<a href="#" title="ferdaous.com">Ferdaous.com</a></p>
</footer>
</body>
</html>
答案 2 :(得分：0)
一个简单的解决方案是将line-height添加到li与nav div相同的高度。
.mainHeader nav ul li{
float : left;
display:inline;
line-height: 40px;
}
a{
text-decoration:none;
}
.mainHeader img{
width:30%;
height:auto;
margin:2% 0;
}
.mainHeader nav{
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul{
list-style:none;
margin:0 auto;
}
.mainHeader nav ul li{
float : left;
display:inline;
line-height: 40px;
}
.mainHeader nav a:link, .mainHeader nav a:visited{
color: #FFF;
display:inlin-block;
padding:10px 25px;
height:20px;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited{
background-color:#CF5C3F;
text-shadow:none;
}
.mainHeader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}<header class="mainHeader">
<img src="img/css.jpg"/>
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Porfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
答案 3 :(得分：0)
您需要向ul元素添加填充。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
body{
background-image: url('img/bg.png');
color:#000305;
font-size:87.5%;
font-family:Arial, 'Licida Sans Unicode';
text-align:left;
}
a{
text-decoration:none;
}
a:link, a:visited{
}
a:hover, a:active{
}
.body{
clear:both;
margin: 0 auto;
width:70%;
}
.mainHeader img{
width:30%;
height:auto;
margin:2% 0;
}
.mainHeader nav{
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul{
list-style:none;
display:inline-block;
margin:0 auto;
padding-top:12px;
}
.mainHeader nav ul li{
display:inline-block;
}
.mainHeader nav a:link, .mainHeader nav a:visited{
color: #FFF;
display:inlin-block;
padding:10px 25px;
height:20px;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited{
background-color:#CF5C3F;
text-shadow:none;
}
.mainHeader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML And CSS Responsive</title>
<meta charset="utf-8"/>
<link rel ="stylesheet" href="style.css" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="mainHeader">
<img src="img/css.jpg"/>
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Porfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="mainContent">
<div class="content">
<article title="top content">
<header>
<h2><a href="#" title="first post"> First post</a></h2>
</header>
<footer>
<p class="post-info">This text is written by christian</p>
</footer>
<content>
<p>This course is built to teach beginners how to start making applications in Android,
as well as for advanced devs to learn some of the advanced features available in Mobile Application Development.</p>
<p>It's a simple code along tutorial series where students can code while learning, which is found to be the most efficient way of learning these days.</p>
</content>
</article>
</div>
</div>
<aside class="top-sidebar">
<article>
<h2>Top sidebar</a></h2>
<p>This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.</p>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h2>Middle sidebar</a></h2>
<p>This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.</p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>Bottom sidebar</a></h2>
<p>This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.</p>
</article>
</aside>
<footer class="mainFooter">
<p>Copyrigt © 2016<a href="#" title="ferdaous.com">Ferdaous.com</a></p>
</footer>
</body>
</html>
答案 4 :(得分：0)
将您的.mainHeader nav ul li更改为display: block。您的子锚标记中也有一个拼写错误，该标记应为display: inline-block;。我添加了对我改变的评论。
body{
background-image: url('img/bg.png');
color:#000305;
font-size:87.5%;
font-family:Arial, 'Licida Sans Unicode';
text-align:left;
}
a{
text-decoration:none;
}
a:link, a:visited{}
a:hover, a:active{}
.body{
clear:both;
margin: 0 auto;
width:70%;
}
.mainHeader img{
width:30%;
height:auto;
margin:2% 0;
}
.mainHeader nav{
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul{
list-style:none;
margin:0 auto;
}
.mainHeader nav ul li{
float : left;
display: block; /* I CHANGED THIS */
}
.mainHeader nav a:link, .mainHeader nav a:visited{
color: #FFF;
display:inline-block; /* I CHANGED THIS */
padding:10px 25px;
height:20px;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited{
background-color:#CF5C3F;
text-shadow:none;
}
.mainHeader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}<header class="mainHeader">
<img src="img/css.jpg" />
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Porfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？