Question

我想在一个盒子上绘制两条水平线： http://codepen.io/anon/pen/gpZqOQ

我使用插件根据设计生成一些代码。但是最终结果没有得到优化。

<h1 id="H1_1">
    <span id="SPAN_2">Feedback</span>
</h1>

#H1_1 {
    box-sizing: border-box;
    clear: both;
    color: rgb(64, 64, 64);
    height: 45px;
    position: relative;
    text-align: center;
    width: 1140px;
    perspective-origin: 570px 22.5px;
    transform-origin: 570px 22.5px;
    border: 0px none rgb(64, 64, 64);
    font: normal normal normal normal 15px/22.5px 'Source Sans Pro', sans-serif;
    margin: 0px 0px 70px;
    outline: rgb(64, 64, 64) none 0px;
}/*#H1_1*/

#H1_1:after {
    box-sizing: border-box;
    color: rgb(64, 64, 64);
    display: block;
    height: 1px;
    left: 0px;
    position: absolute;
    text-align: center;
    top: 22.5px;
    width: 1140px;
    align-self: stretch;
    perspective-origin: 570px 0.5px;
    transform-origin: 570px 0.5px;
    content: '"' '"';
    background: rgb(189, 195, 199) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(64, 64, 64);
    font: normal normal normal normal 15px/22.5px 'Source Sans Pro', sans-serif;
    outline: rgb(64, 64, 64) none 0px;
}/*#H1_1:after*/

#SPAN_2 {
    box-sizing: border-box;
    color: rgb(189, 195, 199);
    display: inline-block;
    height: 45px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    width: 108.890625px;
    z-index: 10;
    perspective-origin: 54.4375px 22.5px;
    transform-origin: 54.4375px 22.5px;
    background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 3px solid rgb(189, 195, 199);
    font: normal normal bold normal 15px/normal Montserrat, sans-serif;
    outline: rgb(189, 195, 199) none 0px;
    padding: 10px 20px;
    transition: all 0.2s ease 0s;
}/*#SPAN_2*/

还有其他更简单的方法可以通过CSS实现这一目标吗？

Answer 1

<hr style=" width : 100%;">
<span id="SPAN_2">Feedback</span>

应用以下CSS

hr{
  display: inline-block;
  margin: 25px 0;
  position: absolute;
}
#SPAN_2 {
  position: absolute;
  z-index: 2;
  display: inline-block;
  border: 3px solid rgb(189, 195, 199);
  outline: rgb(189, 195, 199) none 0px;
  padding: 10px 20px;
  margin: 0 0 0 50%;
}

Answer 2

试试这个：

<div>
  bla
</div>

结合：

div {
  padding:          80px;
  background-color: red;
  border-top:       5px double black;
  border-bottom:    3px dotted black;
}

请参阅http://jsfiddle.net/4ghvvke3/了解相关信息。

或者我是否误解了您的问题，您是否希望在主框对象后面划一条线？在这种情况下，我建议使用x-repeat的1px宽度的背景图像，可能比所有CSS代码更少的字节。

Answer 3

我做了一个简单的fiddle来演示实现这一目标的最简单方法。

<div id="box">

<hr class="line1">
<hr class="line2">

</div>

和CSS：

#box {
    width: 85%;
    margin: 0 auto;
}

.line1 {
  width: 100%;
}

.line2 {
    width: 100%;
}

这使用hr属性水平绘制2行，在这种情况下占用父容器的100％宽度。

或类似this的更细线。

Answer 4

<强> Demo

使用：before和：after就像你拥有它一样，我添加了一个classname而不是random id

<h1 class="feedback">
    <span>Feedback</span>
</h1>

CSS

.feedback {
  position: relative;
  text-align: center;
}

.feedback span {
  box-sizing: border-box;
  color: rgb(189, 195, 199);
  display: inline-block;
  height: 45px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  width: auto;
  z-index: 10;
  perspective-origin: 54.4375px 22.5px;
  transform-origin: 54.4375px 22.5px;
  background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
  border: 3px solid rgb(189, 195, 199);
  font: normal normal bold normal 15px/normal Montserrat, sans-serif;
  outline: rgb(189, 195, 199) none 0px;
  padding: 10px 20px;
  transition: all 0.2s ease 0s;
  position: relative;
  z-index: 1;
}
.feedback:before,
.feedback:after {
  content: '';
  display: inline-block;
  border: 1px solid rgb(189, 195, 199);
  width: 100%;
  position: absolute;
  z-index: 0;
  left: 0;
}

.feedback:before {
  top: 40%;
}

.feedback:after {
  bottom: 40%; 
}

Answer 5

＆＃13;

.container {
  width: 100%;
  margin-top:3em;
  text-align:center;
}
.feedback_box {
  color: rgb(189, 195, 199);
  line-height:45px;
  text-align: center;
  text-transform: uppercase;
  background: rgb(255, 255, 255);
  border: 3px solid rgb(189, 195, 199);
  font: normal normal bold normal 15px/normal Montserrat, sans-serif;
  padding: 1em;
  z-index:4;
  position:relative;
}
.line1, .line2 {
  border:0;
  height:3px;
  background:rgb(189, 195, 199);
}
.line1 {
  margin-bottom:-20px;
}
.line2 {
  margin-top:-20px;
}

＆＃13;

<div class="container">
  <hr class="line1">
	  <span class="feedback_box">Feedback</span>
  <hr class="line2">
</div>

＆＃13;

一个盒子上的两条水平线

5 个答案: