简单的CSS浮动问题

Question

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

但是我无法让行在文本的左侧堆叠在一起.

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

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

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

这是我的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>