css 从左到右的虚缐框缐(两个元素之间)

rqqzpn5f 于 2022-11-26 发布在其他

关注(0)|答案(6)|浏览(117)

我不知道该怎么做。
我想做的是在Uncategorized和82，359之间打印点，或者至少是错觉，我想我必须做一些虚线边框

<ul class="list">
    <li>
    <a href="#">
        <span class="count">82,359</span>
        Uncategorized
    </a>
    </li>
</ul>

CSS

.list a {
display: block;
padding: 6px 10px;
}

.list .count {
font-weight: normal;
float: right;
color: #6b7a8c;
}

我想要的是：

我尝试过的，我能想到的唯一方法是<div style="border-bottom: 1px dotted #CCC;"></div>介于.count和Uncategorized之间，但这会在两者之上添加边框

css

来源：https://stackoverflow.com/questions/31481386/dotted-border-from-left-to-right-between-two-elements

6条答案

按热度按时间

qfe3c7zg1#

根据此处使用的示例：黑帽武士引用的Dot Leaders，对标记和链接中的CSS进行了细微的更改。
添加了注解以解释代码如何工作。
第一个

赞(0）回复(0）举报 2022-11-26

n53p2ov02#

我会选这样的
第一个

赞(0）回复(0）举报 2022-11-26

0qx6xfy63#

你正在寻找的是所谓的点领导人。这里有一篇文章，描述如何实现所需的效果：
http://www.w3.org/Style/Examples/007/leaders.en.html

赞(0）回复(0）举报 2022-11-26

xzv2uavs4#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .list a {
            display: block;
            border-bottom: dotted 1px;
            height: 13px;
        }

        .list .title {
            padding-right: 5px;
            background-color: white;
            font-weight: normal;
            float: left;
            color: #6b7a8c;
        }
        .list .count {
            background-color: white;
            padding-left: 5px;
            font-weight: normal;
            float: right;
            color: #6b7a8c;
        }
    </style>
</head>
<body>
    <ul class="list">
        <a href="#">
            <span class="title">Uncategorized</span>
            <span class="count">82,359</span>
        </a>
    </ul>
</body>
</html>

我使用了一个肮脏的黑客。首先，标签现在有一个高度13。然后我添加了背景色：白色（或其他）来删除文本下的点。请小心使用此解决方案！

赞(0）回复(0）举报 2022-11-26

s6fujrry5#

试试这个
HTML语言

<ul class="list">
    <li>
    <a href="#">
        <span>Uncategorized</span>
        <span class="count">82,359</span>
    </a>
    </li>
</ul>

CSS

ul{
    list-style-type: none;
    font-family: arial;
    font-size: 17px;
}
a{
    text-decoration: none;
    color: #000;
}
ul.list li{
}
li span + span:before{
    content: "..................................";
    white-space: nowrap;
}

看看这个Fiddle

赞(0）回复(0）举报 2022-11-26

6g8kf2rb6#

使用Flex，现在变得非常简单：

<div class="parent">
    <span class="description">Description</span>
    <div class="dottedDiv"></div>
    <span class="price">price</span>
</div>

CSS：

.parent {
display: flex;
justify-content: center;
}

.description{
  padding-right: 1rem;
}

.price{
  padding-left: 1rem;
}

.dottedDiv{
 height : 1.6rem;
 border-bottom: 1px dotted black;
 flex-grow: 2;
 }

请注意，我降低了点线div的高度，以使线条位于所需的位置。

赞(0）回复(0）举报 2022-11-26

我来回答

css 从左到右的虚缐框缐(两个元素之间)

6条答案

相关问题

热门标签

最新问答