Question

我创建了一个导航栏，但我的border-bottom-bottom无法正常工作，它正在作为border-top-top工作。我正在尝试创建一个类似于Twitter的导航栏进行学习。如果有人帮助我解决问题，这将是一个很大的帮助

*{
	margin: 0px;
	padding: 0px;
}

.header{
	width: 100%;
	height: auto;
	border-bottom:  1px solid #dae0e4;
}
.container{
	width: 90%;
	margin: 10px auto;
}
.main-nav{
	width: 50%;
	float: left;
}
.second-nav{
	float: right;
}
ul {
  list-style-type: none;
  overflow: hidden;
}
li {
  float: left;
  font-size: 120%;
}
li a {
	color: #6f7d87;
	display: block;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}
.body{
	clear: both;
}

<!DOCTYPE html>
<html>
<head>
	<title>Twitter</title>
	<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
	<div class="page">
		<div class="header">
			<div class="container">
				<div class="main-nav">
					<ul>
						<li><a href="">Home</a></li>
						<li><a href="">Notification</a></li>
						<li><a href="">Messages</a></li>
					</ul>
				</div>
				<div class="second-nav">
					<ul>
						<li><a href="">Search Bar</a></li>
						<li><a href="">Profile</a></li>
						<li><a href="">Tweet</a></li>
					</ul>
				</div>
			</div>		
		</div>
		<div class="body">
			<p>Something</p>
		</div>
	</div>
</body>
</html>

我希望边框显示衬砌的缺点，但它显示衬砌的缺点，我在网络上的任何地方都找不到解决方案，而且我也无法解决。

Answer 1

确实出现了边框，但外观在标题上方。

这是因为.header的子元素是浮动的，因此.header的高度变为零。为避免这种情况，请为.header添加一个clearfix。在这里，我使用overflow:auto对其进行了修复。

* {
  margin: 0px;
  padding: 0px;
}

.header {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #000;
}

.container {
  width: 90%;
  margin: 10px auto;
  overflow: auto;
}

.main-nav {
  width: 50%;
  float: left;
}

.second-nav {
  float: right;
}

ul {
  list-style-type: none;
  overflow: hidden;
}

li {
  float: left;
  font-size: 120%;
}

li a {
  color: #6f7d87;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.body {
  clear: both;
}

<div class="page">
  <div class="header">
    <div class="container">
      <div class="main-nav">
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="">Notification</a></li>
          <li><a href="">Messages</a></li>
        </ul>
      </div>
      <div class="second-nav">
        <ul>
          <li><a href="">Search Bar</a></li>
          <li><a href="">Profile</a></li>
          <li><a href="">Tweet</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="body">
    <p>Something</p>
  </div>
</div>

不知道为什么我的边界底部无法正常工作有人可以解决它

1 个答案: