Question

我有这段代码：

代码HTML：

    <div class="text1"><h2><span>THIS IS A TEST</span></h2>
    <p>1800 - 1570 - 000</p>
    <h2><span>THIS IS A TEST</span></h2>
</div>
<div class="text2"><h2><span>THIS IS A TEST</span></h2>

    <p>1800 - 1570 - 000</p>

    <h2><span>THIS IS A TEST</span></h2>
</div>

CODE CSS：

h2 { width:100%; text-align:center; border-bottom: 1px solid #000; line-height:0.1em; margin:10px 0 20px; } 
h2 span {  padding:0 10px; }
.text1{float:left;display:inline-block;width:50%;}
.text2{float:left;display:inline-block;width:50%;}

我试图创造这种效果“---- text ----”

目前我的专栏剪切了文字并且不想要这个。

在网站的页脚中，我试图更改并观看节目

http://www.les-toiles.co/

我的代码出了什么问题？能帮助我解决这个问题吗？

提前致谢！

Answer 1

如果我的问题是正确的，你需要带有文字的虚线。

Fiddle

h2 { width:100%; 
    text-align:center; 
    border-bottom: 1px dashed #000; 
    line-height:0.1em; 
    margin:10px 0 20px; }

Answer 2

尝试使用border：虚线;

我已经实施了解决方案，请在下面找到

[虚线示例] [1]

[1]: https://jsfiddle.net/pavank560/7jGHS/1302/

这段代码有什么问题？HTML / CSS

2 个答案: