在自动时导航高度为0px？

时间：2016-08-01 21:08:44

标签： html css nav

我是新手并学习如何使用HTML和CSS进行编码，我在尝试制作导航栏时遇到了问题。问题如下：我设置了 我的导航的背景颜色为红色，但我看不到它。它的导航条高度为0px，我不知道为什么。谁能帮我这个？提前谢谢！

＆＃13;
＆＃13; 
body{
	margin:0;
}

nav ul{
	margin:0;
}

nav{
	margin-top:0px;
	background-color:red;
	height:auto;
}

header img{
	height:45px;
	width: 45px;
	display:block;
	margin:auto;
}

nav ul li{

	display:inline-block;
}
nav ul div{

	display:block;
}

nav ul li a{
	display:block;
	text-decoration: none;
	margin-left:20px;
	margin-right:40px;
	padding:10px;
	border:1px solid black;
	border-radius: 10px;
}

header{
	background-color:#BACFEB;
	height: auto;
}

header h1{
	font-family: cursive;
	margin:0;
	text-align: center;
}

#right{
	float:right;
}


#left{
	float:left;
}

/*footer ul{

margin:auto;
}

footer ul li{

display: inline-block;

}*/


/*CSS works*/
nav ul li a:hover{

text-decoration:underline;
font-family: Arial;
color:red;
}
＆＃13; 
<nav>
  <ul>
    <div id="left">
      <li><a href="index.htm">Home</a>
      </li>
      <li><a href="#"> About Us</a>
      </li>
      <li><a href="#"> Contact Us</a>
      </li>
    </div>
    <div id="right">
      <li><a href="#"> Sign in</a>
      </li>
    </div>
  </ul>
</nav>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：3)

由于.nav的所有内容都是浮动的，因此您需要overflow: hidden以确保外部元素正确地跨越所有子元素。

nav {
  margin-top:0px;
  background-color:red;
  overflow: hidden;
}

答案 1 :(得分：1)

更新

这是由浮动的div引起的，这也是无效的，因为不允许div作为ul

注意：在下面的示例中，我更新了标记

您可以通过清除float（well explained here）

来解决此问题 
nav:after {
  content: '';
  display: block;
  clear: both
}


body{
	margin:0;
}
nav ul{
	margin:0;
}
nav{
	margin-top:0px;
	background-color:red;
	height:auto;
}
header img{
	height:45px;
	width: 45px;
	display:block;
	margin:auto;
}
nav ul li{
	display:inline-block;
}
nav ul div{
	display:block;
}
nav ul li a{
	display:block;
	text-decoration: none;
	margin-left:20px;
	margin-right:40px;
	padding:10px;
	border:1px solid black;
	border-radius: 10px;
}
header{
	background-color:#BACFEB;
	height: auto;
}
header h1{
	font-family: cursive;
	margin:0;
	text-align: center;
}
#right{
	float:right;
}
#left{
	float:left;
}
nav:after {
  content: '';
  display: block;
  clear: both
}

/*footer ul{

margin:auto;
}

footer ul li{


display: inline-block;

}*/


/*CSS works*/
nav ul li a:hover{
  text-decoration:underline;
  font-family: Arial;
  color:red;
}
<nav>
  <div id="left">
    <ul>
      <li><a href="index.htm">Home</a>
      </li>
      <li><a href="#"> About Us</a>
      </li>
      <li><a href="#"> Contact Us</a>
      </li>
    </ul>
  </div>
  <div id="right">
    <ul>
      <li><a href="#"> Sign in</a>
      </li>
    </ul>
  </div>
</nav>

我建议你这样做，使用flex而不是float。

如果您无法使用flex，display:table-cell将会执行相同的操作（下面的示例2）

body {
  margin: 0;
}
nav ul {
  margin: 0;
}
nav {
  margin-top: 0px;
  background-color: red;
  height: auto;
}
nav {
  display: flex;
}
header img {
  height: 45px;
  width: 45px;
  display: block;
  margin: auto;
}
nav ul li {
  display: inline-block;
}
nav ul div {
  display: block;
}
nav ul li a {
  display: block;
  text-decoration: none;
  margin-left: 20px;
  margin-right: 40px;
  padding: 10px;
  border: 1px solid black;
  border-radius: 10px;
}
header {
  background-color: #BACFEB;
  height: auto;
}
header h1 {
  font-family: cursive;
  margin: 0;
  text-align: center;
}
/*CSS works*/

nav ul li a:hover {
  text-decoration: underline;
  font-family: Arial;
  color: red;
}
<nav>
  <div id="left">
    <ul>
      <li><a href="index.htm">Home</a>
      </li>
      <li><a href="#"> About Us</a>
      </li>
      <li><a href="#"> Contact Us</a>
      </li>
    </ul>
  </div>
  <div id="right">
    <ul>
      <li><a href="#"> Sign in</a>
      </li>
    </ul>
  </div>
</nav>

样本2 

body {
  margin: 0;
}
nav ul {
  margin: 0;
}
nav {
  margin-top: 0px;
  background-color: red;
  height: auto;
}
nav > div {
  display: table-cell;
}
header img {
  height: 45px;
  width: 45px;
  display: block;
  margin: auto;
}
nav ul li {
  display: inline-block;
}
nav ul div {
  display: block;
}
nav ul li a {
  display: block;
  text-decoration: none;
  margin-left: 20px;
  margin-right: 40px;
  padding: 10px;
  border: 1px solid black;
  border-radius: 10px;
}
header {
  background-color: #BACFEB;
  height: auto;
}
header h1 {
  font-family: cursive;
  margin: 0;
  text-align: center;
}
/*CSS works*/

nav ul li a:hover {
  text-decoration: underline;
  font-family: Arial;
  color: red;
}
<nav>
  <div id="left">
    <ul>
      <li><a href="index.htm">Home</a>
      </li>
      <li><a href="#"> About Us</a>
      </li>
      <li><a href="#"> Contact Us</a>
      </li>
    </ul>
  </div>
  <div id="right">
    <ul>
      <li><a href="#"> Sign in</a>
      </li>
    </ul>
  </div>
</nav>

答案 2 :(得分：0)

导航栏中的DIV #left和#right会浮动。浮动元素不会在其容器中占据任何垂直空间，这就是容器高度为0的原因。

但是有一种方法：将overflow: hidden;分配给容器，即分配给ul

＆＃13;
＆＃13; 
body{
	margin:0;
}

nav ul{
	margin:0;
    overflow: hidden;
}

nav{
	margin-top:0px;
	background-color:red;
	height:auto;
}

header img{
	height:45px;
	width: 45px;
	display:block;
	margin:auto;
}

nav ul li{

	display:inline-block;
}
nav ul div{

	display:block;
}

nav ul li a{
	display:block;
	text-decoration: none;
	margin-left:20px;
	margin-right:40px;
	padding:10px;
	border:1px solid black;
	border-radius: 10px;
}

header{
	background-color:#BACFEB;
	height: auto;
}

header h1{
	font-family: cursive;
	margin:0;
	text-align: center;
}

#right{
	float:right;
}


#left{
	float:left;
}

/*footer ul{

margin:auto;
}

footer ul li{

display: inline-block;

}*/


/*CSS works*/
nav ul li a:hover{

text-decoration:underline;
font-family: Arial;
color:red;
}
＆＃13; 
<nav>
  <ul>
    <div id="left">
      <li><a href="index.htm">Home</a>
      </li>
      <li><a href="#"> About Us</a>
      </li>
      <li><a href="#"> Contact Us</a>
      </li>
    </div>
    <div id="right">
      <li><a href="#"> Sign in</a>
      </li>
    </div>
  </ul>
</nav>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：-1)

因为float: left和float: right拆分

你把它放在ul clear: both ul结尾div

  

试试这个

将此<div style="clear:both;"></div>放在ul中，但最新的

private void firebaseAuthWithGoogle(GoogleSignInAccount acct) { AuthCredential credential = GoogleAuthProvider.getCredential(acct.getIdToken(), null); auth.signInWithCredential(credential) .addOnCompleteListener(LoginActivity.this, new OnCompleteListener<AuthResult>() { @Override public void onComplete(@NonNull Task<AuthResult> task) { // If sign in fails, display a message to the user. If sign in succeeds // the auth state listener will be notified and logic to handle the // signed in user can be handled in the listener. if (!task.isSuccessful()) { Toast.makeText(LoginActivity.this, "Authentication failed.", Toast.LENGTH_SHORT).show(); } // ... } }); }

相关问题
最新问题