Question

我试图在菱形的左右两侧留一个边距，但是不能。

基本上我是造型＆lt; hr＆gt;进入自定义样式的hr

代码：

<div class="container">
    <hr class="square gold">
    <p>some text</p>
</div>

演示：http://jsfiddle.net/squidraj/03xw85w0/

非常感谢任何帮助。提前谢谢。

Answer 1

基本上，您不能使用hr来执行此操作...您必须使用span或其他一些元素。

然后，您可以按照链接问题HERE中详述的技巧进行操作。

body {
  text-align: center;
}
.divider {
  width: 70%;
  margin: 20px auto;
  overflow: hidden;
  text-align: center;
  line-height: 1.2em;
  display: inline-block;
}
.divider:before,
.divider:after {
  content: "";
  vertical-align: top;
  display: inline-block;
  width: 50%;
  height: 0.65em;
  border-bottom: 1px solid black;
  margin: 0 2% 0 -55%;
}
.divider:after {
  margin: 0 -55% 0 2%;
}

<span class="divider">◊◊</span>

在菱形的两侧增加空间

1 个答案: