简单的CSS浮动问题

Question

我是初学者，我正在努力创造这样的东西

但是我无法让线条叠加在文本左侧的彼此之上。

有人可以帮我在正确的方向推动我吗？

＆＃13;

＆＃13;

#topbar {
	width: 15%;
	background-color: #000000;
	height: 3px;
	float: left;
}
#bottombar {
	width: 15%;
	background-color: #000000;
	height: 1px;
	float: none;
    clear: both;
}
#LocationText {
	float: left;
    font-size: 50px;
}

＆＃13;

<div id="topbar"></div>
<div id="LocationText">Location</div>
<div id="bottombar"></div>

＆＃13;

＆＃13;

＆＃13;

这是我的http://jsfiddle.net/y0sv7shs/

Answer 1

使用::before和::after：伪元素。

span {
  position: relative;
  margin-left: 100px;
  font-size: 50px;
}
span::before, span::after {
  position: absolute;
  content: '';
  width: 50%;
  height: 100%;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  right: -50%;
  top: 0;
}
span::before {
  left: -50%;
}

<span>Location</span>

---

或者你可以这样做：

span {
  position: relative;
  margin-left: 100px;
  font-size: 50px;
}
span::before, span::after {
  position: absolute;
  content: '';
  width: 50%;
  height: 25%;
  border-top: 2px solid black;
  border-bottom: 1px solid black;
  right: -50%;
  top: 37.5%;
}
span::before {
  left: -50%;
}

<span>Location</span>

---

您要求的那个。

span {
  position: relative;
  font-family: 'Bree Serif', serif;
  margin-left: 100px;
  font-size: 50px;
  color: #A0001F;
  font-weight: bold;
}
span::before, span::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 15%;
  border-top: 2px solid #A0001F;
  border-bottom: 2px solid #A0001F;
  right: -100%;
  top: 42.5%;
}
span::before {
  left: -45%;
  width: 45%;
}

<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<span>CONTACT</span>

Answer 2

除了chipChocolate的答案之外，你还可以包含这些元素，以便强制它们相对于文本在特定位置上位于彼此之上（但是，这会占用更多元素，并且不那么干净）：

<div class="locationcontainer">
    <div id="topbar"></div>
    <div id="bottombar"></div>
</div>
<div id="LocationText">Location</div>

#topbar {
    width: 100%;
    background-color: #000000;
    height: 2px;
}
#bottombar {
    width:90%;
    background-color: #000000;
    height: 2px;
    margin-top: 10px;
    float:right;
}
.locationcontainer
{
    float:left;
    width:15%;
    margin-right:5px;
}
#LocationText {
    float: left;
}

http://jsfiddle.net/fstqdxeu/