Question

我的代码如下：

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

我希望这个<ul>标记附近有边框

我尝试如下：

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

但它显示高于<ul>

的div

对此有任何建议。

Answer 1

为什么不直接定位ul代码？

CSS文件：

ul {
    border: 1px solid black;
}

内联CSS：

<ul class="connected list no2" style="border: 1px solid black">

如果您想玩它，请the fiddle。

Answer 2

<ul class="connected">
  <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 #000;
       list-style-type: none;
    }

Fiddle

Answer 3

Jsbin：http://jsbin.com/aQUteTO/1/

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：

.connected{
  border:1px solid #FF0000
}

您可以真正避免使用Div，因为您只需将样式应用于相应的ul类。

结合起来：

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

Answer 4

您可以申请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>

或者，您可以将css属性添加到已在ul标记中添加的任何一个css类名称，如connected list no2

.list{
  border:2px solid #a1a1a1;
}

如何获得<ul>标签周围的边界？</ul>

4 个答案: