穿过一个盒子的两条水平线[重复]答案

【问题标题】：Two horizontal lines across a box [duplicate]穿过一个盒子的两条水平线[重复]
【发布时间】：2015-10-25 23:33:00
【问题描述】：

我试图在一个盒子上画两条水平线： 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 实现吗？

【问题讨论】：

标签： html css

【解决方案1】：

.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;
}

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

【讨论】：

【解决方案2】：

我做了一个简单的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 属性水平绘制两条线，在这种情况下占据父容器的 100% 宽度。

或类似this 的东西用于更细的线条。

【讨论】：

这和codepen.io/anon/pen/gpZqOQ有什么相似之处？
您要求一种使用 CSS 实现此目的的简单方法，就是这样。只需修改代码以适应您的标题。

【解决方案3】：

Demo

使用 :before 和 :after 就像你拥有它一样，我添加了一个类名而不是随机 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%; 
}

【讨论】：

【解决方案4】：

<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%;
}

【讨论】：

非常有趣的一段代码。谢谢和赞成。

【解决方案5】：

试试这个：

<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 代码都少。

【讨论】：