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

时间:2015-03-08 09:00:20

标签: html css

我有这段代码:

http://jsfiddle.net/7jGHS/1299/

代码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/

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

提前致谢!

2 个答案:

答案 0 :(得分:0)

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

Fiddle

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

答案 1 :(得分:0)

尝试使用border:虚线;

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

[虚线示例] [1]

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