css - 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

没问题伙计，但为此我们也不需要将第一个菜单项与其他菜单项分开， 检查这些， 你的 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; }