div中div的错误css布局

时间：2015-05-12 13:00:02

标签： html css

enter image description here

我想制作一个简单的标题，其中包含橙色背景和一个小div内部（居中）并且有一个＆＃34;登录＆＃34;社交链接在div内向右浮动。

但是使用下面的代码，看起来分区标题顶部栏并没有相应地扩展容器。 （我将容器设置为蓝色以进行测试）。还没有边距设置，为什么标题周围仍有一些空白区域？

 <div id="main-wrapper">
    <header id="header">
        <div class="header-top-bar">
            <div class="container">
                <div class="header-login">
                            <a href="#">Sign In / Register</a>  
                        </div>
                        <!-- end .header-login -->
                        <!-- Header Social -->
                        <ul class="header-social">
                            <li><a href="#"><i class="fa fa-facebook-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-twitter-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-google-plus-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-linkedin-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-pinterest-square"></i></a>
                            </li>
                        </ul>

            </div> <!-- end .container -->
        </div>

#main-wrapper { overflow: hidden; }

#header { position: relative; }

#header a { text-decoration: none; }

.header-top-bar {
  padding: 0px 0 0px 0;
  background: #FF7F00;
  color: #FF7F00;
  }

.header-top-bar p { 
 position: relative;
 float: right;
 } 

.header-top-bar{
  padding-right: 0px;
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid black;
  }

.container 
{
  position: relative;
 float: right;
 margin-top: 0px;
 border: 1px solid black;
 background-color: blue;
 }

.header-login a {
 color: #fefefe;
font-size: 13px;
}

 .header-login a:hover { color: #080000; }

.header-login a:last-child { margin: 0 0x 0 0px; }

.header-social {
  position: relative;
  margin: 0 auto;
  padding-top: 0px;
  float: left;
 }

.header-social > li {
  display: inline;
  margin: 0 2px;
 }

.header-social > li > a {
 color: #ffffff;
  font-size: 18px;
  line-height: 30px;
  }

.header-social > li > a:hover {
  color: #080000;
}

对不起凌乱的代码感到抱歉。

4 个答案:

答案 0 :(得分：2)

添加overflow: hidden; .header-top-bar 

#main-wrapper { overflow: hidden; }

#header { position: relative; }

#header a { text-decoration: none; }

.header-top-bar {
  padding: 0px 0 0px 0;
  background: #FF7F00;
  color: #FF7F00;
    overflow: hidden;
  }

/*.header-top-bar p { 
 position: relative;
 float: right;
 } */

.header-top-bar{
  padding-right: 0px;
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid black;
  }

.container 
{
  position: relative;
 float: right;
 margin-top: 0px;
 border: 1px solid black;
 background-color: blue;
 }

.header-login a {
 color: #fefefe;
font-size: 13px;
}

 .header-login a:hover { color: #080000; }

.header-login a:last-child { margin: 0 0x 0 0px; }

.header-social {
  position: relative;
  margin: 0 auto;
  padding-top: 0px;
  float: left;
 }
<div id="main-wrapper">
    <header id="header">
        <div class="header-top-bar">
            <div class="container">
                <div class="header-login">
                            <a href="#">Sign In / Register</a>  
                        </div>
                        <!-- end .header-login -->
                        <!-- Header Social -->
                        <ul class="header-social">
                            <li><a href="#"><i class="fa fa-facebook-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-twitter-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-google-plus-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-linkedin-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-pinterest-square"></i></a>
                            </li>
                        </ul>

            </div> <!-- end .container -->
        </div>

答案 1 :(得分：1)

这就是你想要实现的目标。

＆＃13;
＆＃13; 
#main-wrapper {
  overflow: hidden;
}
#header {
  position: relative;
}
#header a {
  text-decoration: none;
}
.header-top-bar {
  padding: 0px 0 0px 0;
  background: #FF7F00;
  color: #FF7F00;
}
.header-top-bar p {
  position: relative;
  float: right;
}
.header-top-bar {
  padding-right: 0px;
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid black;
  display: table;
  width: 100%;
  table-layout: fixed;
}
.left-container {
  display: table-cell;
  vertical-align: top;
  width: 100%;
}
.container {
  display: table-cell;
  vertical-align: top;
  width: 100%;
  position: relative;
  text-align: left;
  margin-top: 0px;
  border: 1px solid black;
  background-color: blue;
}
.header-login a {
  color: #fefefe;
  font-size: 13px;
}
.header-login a:hover {
  color: #080000;
}
.header-login a:last-child {
  margin: 0 0x 0 0px;
}
.header-social {
  position: relative;
  margin: 0 auto;
  padding-top: 0px;
}
.header-social > li {
  display: inline;
  margin: 0 2px;
}
.header-social > li > a {
  color: #ffffff;
  font-size: 18px;
  line-height: 30px;
}
.header-social > li > a:hover {
  color: #080000;
}
＆＃13; 
<div id="main-wrapper">
  <header id="header">
    <div class="header-top-bar">
      <div class="left-container"></div>
      <div class="container">
        <div class="header-login">
          <a href="#">Sign In / Register</a> 
        </div>
        <!-- end .header-login -->
        <!-- Header Social -->
        <ul class="header-social">
          <li><a href="#"><i class="fa fa-facebook-square"></i></a>
          </li>
          <li><a href="#"><i class="fa fa-twitter-square"></i></a>
          </li>
          <li><a href="#"><i class="fa fa-google-plus-square"></i></a>
          </li>
          <li><a href="#"><i class="fa fa-linkedin-square"></i></a>
          </li>
          <li><a href="#"><i class="fa fa-pinterest-square"></i></a>
          </li>
        </ul>

      </div>
      <!-- end .container -->
    </div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

看看这个。

＆＃13;
＆＃13; 
 <head>
	<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
 </head>
 <div id="main-wrapper">
    <header id="header">
        <div class="header-top-bar">
            <div class="container">
                        <!-- Header Social -->
                        <ul class="header-social">
                            <li><a href="#"><i class="fa fa-facebook-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-twitter-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-google-plus-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-linkedin-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-pinterest-square"></i></a>
                            </li>
                        </ul>
					<div class="header-login">
                            <a href="#">Sign In / Register</a>  
                     </div>

            </div> <!-- end .container -->
        </div>
<style>
#main-wrapper { overflow: hidden;background: #ff7f00; }

#header { position: relative; }

#header a { text-decoration: none; }

.header-top-bar {
  padding: 0px 0 0px 0;
  background: #FF7F00;
  color: #FF7F00;
  }

.header-top-bar p { 
 position: relative;
 float: right;
 } 

.header-top-bar{
  padding-right: 0px;
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid black;
  height:11%;
  }

.container 
{
  float: right;
    margin-top: 4px;
    position: relative;
    width: 52%;
 }

.header-login a {
 color: #fefefe;
font-size: 13px;
}

 .header-login a:hover { color: #080000; }

.header-login a:last-child { margin: 0 0x 0 0px; }

.header-social {
  position: relative;
  margin: 0 auto;
  padding-top: 0px;
  float: left;
 }

.header-social > li {
  display: inline;
  margin: 0 2px;
 }

.header-social > li > a {
 color: #ffffff;
  font-size: 18px;
  line-height: 30px;
  }

.header-social > li > a:hover {
  color: #080000;
}
</style>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

可能是边距和/或填充的用户代理样式表设置

添加

* { margin: 0; padding: 0; }

到样式表以重置用户代理边距和填充

相关问题
最新问题