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;
}

你可以在这里看到结果。这是我当前的问题是左侧导航。可以看到，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; ，有关更多信息，请在此处更新您的布局，只需给我一个您想要使其外观的蓝图，然后我将帮助您格式化这些。干杯。并使用height:auto也

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; }