Question

我有2个跨度

<span style="float:left;">text1</span>
<span style="float:right;">text2</span>

如何在单词之间加上底线？使用css

喜欢_______________这个和____________这个和____________一样

Answer 1

我的解决方案仅在您允许每行指定最大宽度的容器时才有效。

.container {
  display: flex;
  max-width: 80%; /* adapt this to your needs */
  clear: both;
}

.pull-left {
  float: left;
  display: inline-flex;
  width: 100%;
}

.pull-right {
  float: right;
  display: inline-flex;
  width: auto;
}

.pull-left::after {
  content: '\200B';
  border-bottom: 1px solid #000000;
  width: 100%;
}

<div class="container">
  <span class="pull-left">text1</span>
  <span class="pull-right">text2</span>
</div>
<div class="container">
  <span class="pull-left">longertext3</span>
  <span class="pull-right">4</span>
</div>

Answer 2

也许不是最好的解决方案，但它确实有效。它不需要为该行使用单独的span元素，但它确实每个文本行使用一个容器元素。

使用左侧文本上的伪元素上的边框创建黑色底线。该行本身具有全宽，但文本下的部分被取消，因为文本本身具有白色边框。

缺点是你需要容器，如果你有图像背景它不会很好用，如果两个文本大于一行的可用空间，它可能不会很好用。

尽管如此，我希望你仍然可以使用它。

＆＃13;

.line {
  display: block;
  position: relative;
  
}
.left, 
.right {
  display: inline-block;
  border-bottom: 1px solid white;
}

.left, 
.left::after {
  left: 0;
}

/* Left text is normal (not absolute), so it enforces the line to have the right hight (otherwise, multiple lines will fall on top of each other */
.right,
.left::after {
  position: absolute;
  top: 0;
}

.right {
  right: 0;
  padding-left: 0.5em; /* White space between bottomline and right text. */
}

.left {
  padding-right: 0.5em; /* White space between left text and bottom line */
}

.left::after {
  display: block;
  content: '\200B'; /* Any invisible character to enforce the right height. */
  border-bottom: 1px solid black;
  right: 0;
  z-index: -1; /* Pseudo element needs to be behind left text content */
}

＆＃13;

<span class='line'>
  <span class='left'>This is a text</span>
  <span class='right'>This as well</span>
</span>
<span class='line'>
  <span class='left'>Another</span>
  <span class='right'>Maybe a bit longer</span>
</span>
<span class='line'>
  <span class='left'>Short</span>
  <span class='right'>Text</span>
</span>

＆＃13;

Answer 3

我创建了所有内容<div>然后将所有内容都包装到<div class="wrap>中，然后将<div class="mid">放在前两个<div>左右之间。该行是.mid＆＃39; s border-bottom。我将display: table-cell分配给.left，.right，将.mid和.wrap分配为table-row。此表格布局用于确保一致性，但我不会将其用于大型项目。顺便说一下，这也很敏感。您可以尽可能少地拉伸和缩小它，并且它的简单布局不会破坏。

＆＃13;

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font: 400 32px/1.5'Source Code Pro';
}
.mid {
  padding: 0 0 -15% 0;
  border-bottom: 2px solid black;
  display: table-cell;
  width: 60vw;
}
.wrap {
  display: table-row;
  width: 100%;
  margin-top: -50%;
}
.right {
  float: right;
  width: 20vw;
  display: table-cell;
  text-align: left;
}
.left {
  float: left;
  width: 20vw;
  display: table-cell;
  text-align: right;
}

＆＃13;

<div class="wrap">

  <div class="left">text1</div>
  <div class="mid"></div>
  <div class="right">text2</div>

</div>

＆＃13;

Answer 4

我不太确定这是否是您想要的，但我更换了跨度之间的水平行下划线

SPAN,
HR {
  FLOAT: LEFT;
}
HR {
  WIDTH: 100PX;
}

<!DOCTYPE HTML>
<HTML>

<BODY>

  <SPAN>Text 1</SPAN>
  <HR/>
  <SPAN>Text 2</SPAN>
  <BR/>
  <SPAN>Text 3</SPAN>
  <HR/>
  <SPAN>Text 4</SPAN>
  <BR/>
  <SPAN>Text 5</SPAN>
  <HR/>
  <SPAN>Text 6</SPAN>
  <BR/>

</BODY>

</HTML>

在2跨度之间划线的最佳方法是什么？

4 个答案: