CSS - 在无序列表中缩进边框

时间:2014-05-29 07:29:12

标签: html css border

.myClass .dropdown-menu > li {
            border-bottom: 1px solid;
            margin-left: 5px;
        }

这会设置列表中每个列表项下的边框。边距缩进文本而不是边框​​。有没有办法实现这一点,因为我希望我的边框缩进为文本。它现在看起来像这样:

-----
  text
-----
  text

我想要

   ----
   text
   ----
   text

.myClass .dropdown-menu {
                border-bottom: 1px solid;
                margin-left: 5px;
            }

边距缩进文本和边框,但正如我之前所说,我只需要缩进边框,保留文本缩进。

HTML:

<ul class="dropdown-menu">
   <li>Item 1 </li>
   <li>Item 2 </li>
</ul>

3 个答案:

答案 0 :(得分:0)

您需要使用text-decoration: underline;text-decoration:overline;,具体取决于您需要如何强调文字

当文本出现下划线时,这个决定会自动拉伸文本的整个长度

答案 1 :(得分:0)

你可以使用:

ul.dropdown-menu { 
    padding-left: 5px;
}

ul.dropdown-menu li {
    border-bottom: 1px solid #000;
}

答案 2 :(得分:0)

尝试这样的事情:

我将 HTML 结构更改为

<ul class="dropdown-menu">
   <li><span>Item 1</span> </li>
   <li><span>Item 2 </span></li>
</ul>

CSS

.dropdown-menu li{
    list-style: none;
}
.dropdown-menu li span{   
    border-bottom:1px dashed;
}

DEMO