Question

我只是在一个网站上工作。我已经完成了所有事情......但差不多......一件事没有得到......所以我认为你们可能会帮助我......

请在这里：

这里我试图将虚线放在链接正下方像这样：

http://oi62.tinypic.com/2f07uy8.jpg

以上图片给出了CSS代码：

.navigation li ul li a {
    color: #000;
    background: none !important;
    border-bottom: 1px dotted #000;
    padding: 0; 
    display: inline-block;
}

但它没有正确显示......这是当前图片：

http://oi60.tinypic.com/es5jrq.jpg

以上图片给出了CSS代码：

.navigation li ul li a {
    color: #000;
    background: #e4e4e4;
    height: 0; 
    border-bottom: 1px dotted #000;
    padding: 0px;
    display: inline-block;
}

Answer 1

您可以使用课后在链接下方绘制虚线，并且可以使用字母间距按照您喜欢的方式将点空格分开。

.navigation li ul li a {
    color: #000;
    background: none !important;
    padding: 0; 
    display: inline-block;
    position: relative;
    overflow: hidden;
}
.navigation li ul li a:after {
    content: "...............................";
    color: #000;
    bottom: 5px;
    left: 0;
}

在pasedo-class之后调整底部值以满足您的需要。有时您无法看到：after伪类后绘制的线，因此请撤消隐藏的溢出以找出虚线的位置。

=============================================== ============================================ 修正：

.navigation li ul li {
background: none;
padding: 12px 12px 6px;
float: none;
display: block;
}
.navigation li ul li a {
color: #000;
background: none !important;
padding: 0;
display: inline-block;
position: relative;
box-shadow: none;
overflow: hidden;
padding-bottom: 10px;
}
.navigation li ul li a:after {
content: "..................................................";
color: #000;
position: absolute;
bottom: 3px;
left: 0;
letter-spacing: 2px;
}

白线是一个盒子阴影。您需要优化您的网站，加载需要很长时间。

Answer 2

你需要给<a>一个固定的高度，而不是0。使用22px似乎工作正常。

Answer 3

我查看了两个网站，在检查了不正确的网站后，我得出了一些结论。

一个。你有方式太多造型。这只会让你的代码变得混乱。这里的关键词是简化。

湾不要使用font，它在过去几年已经变得有些过时了。

℃。上面的白线是因为你正在使用偏移量为1px的box-shadow（在foundation.css第478行中）。你需要这个属性吗？如果没有，也许你应该删除它。

d。在元素中的任何位置都找不到任何border-bottom样式。

虚线没有出现在CSS ......！

3 个答案: