Html 如何在 <ul> 标签周围获得边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21275870/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get border Around <ul> tag?
提问by Swap L
My code is as follows :
我的代码如下：
<ul class="connected list no2">
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
</ul>
I want border around this <ul>tag
我想要这个<ul>标签周围的边框
I tried as follows :
我试过如下：
<div style="border:2px solid #a1a1a1;">
<ul class="connected list no2">
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
</ul>
</div>
but it is showing div above the <ul>
但它在上面显示 div <ul>
Any suggestion on this please.
请对此提出任何建议。
回答by ElliotSchmelliot
Why not just target the ultag?
为什么不直接定位ul标签？
CSS File:
CSS文件：
ul {
border: 1px solid black;
}
Inline CSS:
内联 CSS：
<ul class="connected list no2" style="border: 1px solid black">
Here is the fiddleif you'd like to play with it.
如果你想玩它，这里是小提琴。
回答by Karuppiah RK
回答by Roy M J
Jsbin : http://jsbin.com/aQUteTO/1/
jsbin：http://jsbin.com/aQUteTO/1/
HTML :
HTML :
<div style="border:2px solid #a1a1a1;">
<ul class="connected list no2">
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
</ul>
</div>
CSS :
CSS :
.connected{
border:1px solid #FF0000
}
You can really avoid the Div as you just need to apply style to the corresponding class of ul.
你真的可以避免 Div 因为你只需要将样式应用到ul.
So combined :
所以结合：
<ul class="connected list no2">
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
</ul>
.connected{
border:1px solid #a1a1a1
}
回答by Krish R
Instead of applying style to divtag, you can apply to ultag
div您可以将样式应用于标签，而不是将样式应用于ul标签
<div>
<ul class="connected list no2" style="border:2px solid #a1a1a1;">
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
</ul>
</div>
OR, You can add css properties to any one of css class name you have added in ul tag already like connectedlistno2
或者，您可以将 css 属性添加到您已经添加到 ul 标签中的任何一个 css 类名中 connectedlistno2
.list{
border:2px solid #a1a1a1;
}
