div边界定位

Question

我无法在div id中定位边框。边框不会跟随div中的文本。

我的HTML看起来像这样：

<div id="menu-left-top">

<ul class="menu-left-top">

<li><a href="auktioner.php">Kategorier</a></li>

</div>

<div id="menu-left">

<ul class="menu-left">

<li><a href="lamper.php">Lamper</a></li>
<li><a href="mobler.php">Møbler</a></li>
<li><a href="kunst.php">Kunst</a></li>
<li><a href="design.php">Design</a></li>
</div>

这是我的CSS：

#menu-left-top {
width:195px;
height:1em;
margin-top:5px;
border-top-style:solid;
border-width:thin;
border-color: #999;

}

ul.menu-left-top {
list-style-type: none;
height:1em;

}

ul.menu-left-top li{

}

ul.menu-left-top li a{
color:#000;
font-size:12px;
text-decoration:none;
font-family: "Gill Sans light"; 

}

ul.menu-left-top li a:hover{
color:#cf0036;
font-size:12px;
text-decoration:none;
font-family:"Gill Sans light";
font-weight:300;
}

#menu-left {
width:195px;
max-height:4em;
margin-top:5px;
border-top-style:solid;
border-bottom-style:solid;
border-width:thin;
border-color: #999;

}


ul.menu-left {
list-style-type: none;

}

ul.menu-left li{

}

ul.menu-left li a{
color:#000;
font-size:12px;
text-decoration:none;
font-family: "Gill Sans light"; 

}
ul.menu-left li a:hover{
color:#cf0036;
font-size:12px;
text-decoration:none;
font-family:"Gill Sans light";
font-weight:300;
}

您可以看到结果here。这是我当前问题的向左导航。正如你所看到的，div右移也有缺点，但我不知道它是否与我最初的问题有关？

Answer 1

删除menu-left div的max-height属性。

Answer 2

有一个max-height？
删除max-height:4em;或者您可以height:auto;

Answer 3

你没有以这种方式关闭你的ul标签，因为你启动任何html标签也必须结束html标签，这是大多数m \ html标签，所以这是主要的错误，首先你需要关闭你的ul，

<div id="menu-left-top">
<ul class="menu-left-top">
<li><a href="auktioner.php">Kategorier</a></li>
</ul>
</div>

<div id="menu-left">
<ul class="menu-left">
<li><a href="lamper.php">Lamper</a></li>
<li><a href="mobler.php">Møbler</a></li>
<li><a href="kunst.php">Kunst</a></li>
<li><a href="design.php">Design</a></li>
</ul>
</div> 

由于

，列表元素周围的大量边框即将到来

border-top-style:solid;
border-bottom-style:solid;

这不是一种正确的接壤方式，你可以使用 border：2px soild＃00000; ，有关这方面的更多更新你的布局，请给我一个如何你的蓝图想让它看起来，然后我会帮你格式化这些。干杯。并使用高度：自动

Answer 4

使用这样的html格式，因为我们不需要区分顶层菜单，我们可以通过这个东西来实现： 使用这个HTML代码：

<div id="menu-left">
<ul class="menu-left">
<li class="first"><a href="auktioner.php">Kategorier</a></li>
<li><a href="lamper.php">Lamper</a></li>
<li><a href="mobler.php">Møbler</a></li>
<li><a href="kunst.php">Kunst</a></li>
<li><a href="design.php">Design</a></li>
</ul>
</div>

然后css更改为：

.first { border-top:#000 solid; }
ul.menu-left li{
border-bottom:#000 solid; 
}

这会产生类似这样的东西，你可以根据你改变边框样式，如果有任何疑问可以随意询问，

Answer 5

没有问题伙伴，但为此我们也不需要将第一个菜单项与其他菜单项分开， 检查这些， 你的HTML代码将是这样的：

<div id="menu-left">
<ul class="menu-left">
<li class="first"><a href="auktioner.php">Kategorier</a></li>
<li><a href="lamper.php">Lamper</a></li>
<li><a href="mobler.php">Møbler</a></li>
<li><a href="kunst.php">Kunst</a></li>
<li class="last"><a href="design.php">Design</a></li>
</ul>
</div>

如果你想要这样

然后你可以使用这个css：

.first { border:#000 solid; }
.last{  border-bottom:#000 solid;  }

如果您想要这样，那么您可以使用它：

.first { border-top:#000 solid; }
.last {  border-bottom:#000 solid; }

您可以将此用于此

.first { border-top:#000 solid;
    border-bottom:#000 solid; }
.last{ border-bottom:#000 solid; }