Question

我一直试图创建一个网站，但div标签似乎没有按计划进行。对于横幅div，徽标div和主导航系统div，它们完全符合我想要的位置，但是当我尝试定位子视点栏和搜索栏时，它们会去在一个奇怪的位置？我无法看到我的代码出错了，一切似乎都没问题。

基本上对于subnav bar我想要它在logo div下面，然后对于search div，我想在主导航系统下稍微想要它。下面的代码是为了让事情变得简单，提前谢谢！

http://jsfiddle.net/xyDt2/

我相信这是我遇到问题的代码：

HTML

<div id="SubNavBar">
<a id="LaptopsOver" href="#" class="left" > </a>
<a id="NetbooksOver" href="#" class="left" ></a>
<a id="TabletsOver" href="#" class="left" ></a>
<a id="eRaaderOver" href="#" class="left" ></a>
</div>

css

#SubNavBar {
border: 3px solid #000;
margin-right: auto;
margin-left: auto;
height: 209px;
width: 100px;
left: auto;
right: auto;
}

Answer 1

当你将div内的所有元素浮动时，div的高度会折叠为零，并且跟随它的元素受浮动子元素的支配。

解决此问题的最快方法是将overflow: auto添加到容器中：

#Banner, #SearchBar, #SubNavBar {
    overflow: auto;
}

http://jsfiddle.net/mblase75/xyDt2/6/

更全面的解决方案是为每个容器div添加clearfix，但overflow:auto应足以满足现代浏览器的使用。

Answer 2

你的小提琴上的标记在#eReaderOver:hover

之后缺少一个近距离支撑

是什么：

#eReaderOver:hover
{ 
background: url("Images/SubNavBarOver_04.gif");

应该是：

#eReaderOver:hover
{ 
background: url("Images/SubNavBarOver_04.gif");
}

你在小提琴中的位置线之后错过了一个分号：

所以：

#SearchBar {
position: relative
margin-right: auto;
margin-left: auto;
height: 30px;
width: 900px;
top: auto;
left: auto;
right: auto;
 }

应该是：

#SearchBar {
 position: relative;
margin-right: auto;
margin-left: auto;
height: 30px;
width: 900px;
top: auto;
left: auto;
right: auto;
 }

Answer 3

这个fiddle（下面的示例部分）

怎么样？

#SearchBar {
position: absolute;
/*margin-right: auto;
margin-left: auto;*/
margin:auto;
height: 30px;
width: 900px;
/*top: auto;
left: auto;
right: auto;*/

}

看看已注释掉的CSS。

编辑：在最终版本中，我还添加了一个包装器来包含所有内容，我删除了空<p></p>以删除子空间上方的白线。

保证金权利和保证金左：自动可以缩短到保证金：自动; 也不需要定位和左，上，下属性。浮动和位置：绝对不能一起工作。

Answer 4

因为你使用标签来制作你的背景！它导致另一个div推到底部。我想你需要的就是这样：

<div id="Banner">
 <div id="Logo"></div>
   <div id="NavBar">  
     <a id="ReviewsOver" href="#" class="Right" ></a>
     <a id="ContactOver" href="#" class="Right" ></a>
     <a id="ShopOver" href="Shop.php" class="Right" ></a>
     <a id="HomeOver" href="Index.php" class="Right" ></a>
   </div>
</div>

<div id="SearchBar">
  <form action="./Results.php" method="get" class="Right"> 
    <input type="text" name="input" size="50" style="border:3px solid #000" />
    <input type="submit" value="Search" />
  </form> 
</div>

<div id="SubNavBar">
  <a id="LaptopsOver" href="#" class="left"> </a>
  <a id="NetbooksOver" href="#" class="left"></a>
  <a id="TabletsOver" href="#" class="left"></a>
  <a id="eRaaderOver" href="#" class="left"></a>
</div>

并使你的CSS像这样：

#Banner {
border: 5px solid #000;
margin-right: auto;
margin-left: auto;
height: 100px;
width: 900px;
left: auto;
right: auto;
    background: url('images/Banner.gif') top right no-repeat;
}
#Logo {
border: 2px solid #000;
height: 150px;
width: 150px;
left: auto;
top: auto;
right: auto;
    background: url('images/logo.gif') top right no-repeat;
    float: left; /* if you want to put logo in left of banner, else write right */
}
#SearchBar {
position: relative
margin-right: auto;
margin-left: auto;
height: 30px;
width: 900px;
top: auto;
left: auto;
right: auto;
    float: right;
}
#SubNavBar {
    border: 3px solid #000;
margin-right: auto;
margin-left: auto;
height: 209px;
width: 100px;
left: auto;
right: auto;
    float: left;
}

你可以通过css中的“float”属性在页面中浮动你的对象，试试吧！

Html / Css中DIV标签的问题

4 个答案: