Question

我有CSS和HTML的问题我无法理解为什么会发生这种情况

HTML：

<body>
  <div id="header">
    <div id="header_conteiner">
      <div id="logo_container">
        <img src="images/logo.png" /> 
      </div>
      <input type="text" id="txtSearch" class="text_input" />
    </div>
  </div>
</body>

CSS：

body{
    background:#787777;
    font-family:"Droid Sans",Helvetica,Arial,Sans-Serif;
    font-size:0.81em;
    margin: 0px;
    padding: 0px;
}

#header{
    height:100px;
    background:#000000;
    width:100%;
    margin:0px;
    border:0px solid #6F3;
}

#header_conteiner{
    width:1000px;
    height:100px;
    border:1px solid #9F0;
    margin:0 auto;
}

#logo_container{
    padding-top:3px;
    width:237px;
    height:100px;
    border:1px solid #03F;
}

#txtSearch{
    width:220px;
    height:20px; float:right;
}

结果如下： enter image description here

正如您在图片输入文字中看到的那样header_conteiner可以有人向我建议吗？

Answer 1

在徽标容器之前移动输入。

Answer 2

logo_container是一个div，一个块元素。这意味着它占据了容器中的水平空间;下一个HTML元素将被强制在它下面。由于logo_container设置为100px，与header_conteiner相同，因此输入框没有剩余的垂直空间。它被强制置于logo_container下面。

要解决此问题，您可以将logo_container设为内联元素并将其向左浮动。内联元素可以彼此相邻，而块线元素需要它们自己的水平空间。

CSS显示属性：http://www.w3schools.com/cssref/pr_class_display.asp

Answer 3

看起来logo_container在3px

之上有一个填充

Answer 4

将此添加到#header_conteiner：

  float: left;
  clear: both;

结果就是这样：

#header_conteiner{
  width:1000px;
  height:100px;
  border:1px solid #9F0;
  margin:0 auto;
  float: left;
  clear: both;
}

HTML / CSS div不适合div

4 个答案: