Question

我想要一个响应式用户界面，其中

行介于2个文本之间：

test ----------------------- test

我尝试过：

test<hr style="display:inline;"/>test

但是它变成一条垂直线，我不想使用像这样的表：

<table>
  <tr>
    <td>test</td>
    <td style="width:100%;"><hr/></td>
    <td>test</td>
  </tr>
</table>

有没有更简单的方法来做到这一点？

Answer 1

您可以使用flexbox [简单方法]

.main {
  display: flex;
  align-items: center;
}

.line {
  flex-grow: 1;
  border-bottom: 1px solid black;
  margin: 5px
}

<p class="main">
  <span>Text1</span>
  <span class="line"></span>
  <span>Text2</span>
</p>

Answer 2

<hr>实际上不是垂直的，它是如此狭窄以至于您只能看到它的边界，所以它看起来就像一条垂直线。

无论如何，您可以自己创建一条线，就像这样；

span { background: #000; display: inline-block; height: 1px; width: 100px; vertical-align: middle; }

text <span></span> other text

Answer 3

使用flexbox

.wrap{
display:flex;
}
hr {
  width:95%
}

<div class="wrap">
  <span>test</span>
  <hr/>
 <span>test</span>
</div>

Answer 4

您可以考虑这样的背景：

.box {
  display: inline-block;
  width: 200px;
  background: linear-gradient(#000, #000) center/100% 1px no-repeat;
}

.box span {
  background: #fff;
  padding: 0 2px;
}

.box span:last-child {
  float: right;
}

<div class="box">
  <span>text</span>
  <span>text</span>
</div>
<br>
<div class="box" style="width:250px;">
  <span>text</span>
  <span>text</span>
</div>
<br>
<div class="box" style="width:350px;">
  <span>text</span>
  <span>text</span>
</div>

使用flexbox：

.box {
  display: inline-flex;
  justify-content:space-between;
  width: 200px;
  background: linear-gradient(#000, #000) center/100% 1px no-repeat;
}

.box span {
  background: #fff;
  padding: 0 2px;
}

<div class="box">
  <span>text</span>
  <span>text</span>
</div>
<br>
<div class="box" style="width:250px;">
  <span>text</span>
  <span>text</span>
</div>
<br>
<div class="box" style="width:350px;">
  <span>text</span>
  <span>text</span>
</div>

Answer 5

这里是使用弹性框的示例。

.myClass {
  display: flex;
  flex-direction: row;
}

.myClass > div {
  flex: 0 0 auto;
}

.myClass > div.grow {
  flex: 1 0 auto;
}

<div class='myClass'>
  <div>test</div>
  <div class='grow'><hr/></div>
  <div>test</div>
</div>

Answer 6

请尝试使用此代码

.width { width:100%; }
.border {
	border: none;
	border:1px dashed #000;
	width: 100%;
	display:inline-block;
	vertical-align: middle
}

<table>
	<tr>
    	<td>Test</td>
        <td class="width"><hr class="border"></td>
        <td> Test </td>
    </tr>
</table>

Answer 7

好问题！这是一些简单的CSS，可以为您提供帮助。如其他答案中所述，使用“ flexbox”实际上是一种有效的解决方案，但是，如果您正在寻找替代解决方案，则可以使用 CSS position and align属性，也很容易使用。

这里我没有使用hr标签。通过在包含的p上设置边框底线，然后为其设置较小的线高来创建该线。然后将文本放在带有白色背景的嵌套跨度中。将其向左对齐，然后将同一标签用于不同的类，然后将其向右对齐。

.one {
    width: 50%; 
    text-align: left; 
    border-bottom: 1px solid #000; 
    line-height: 0.1em;
}
.two {
    text-align: right; 
    position: relative;
    top: -18px;
    left: 50%;
        }
p span { 
    background:#fff;  
}

<p class="one"><span>TEST</span></p>
<p class="two one"><span>TEST</span></p>

Answer 8

test<hr style="display:inline-block;width:90%;"/>test

在文本中间添加居中的<hr />类线条

8 个答案: