Question

我正在构建一个列表小部件，其中我有多个<li>，其中包含两个兄弟元素。

标题为<span>，底线为<div>。该线必须根据相邻span元素的宽度而变化。

＆＃13;

.limit-area {
  width: 250px;
  height: 350px;
  background-color: #96ceb4;
}
.limit-area ul {
  font-size: 0;
  list-style-type: none;
  -webkit-padding-start: 0;
}
.limit-area ul li {
  background-color: #ffeead;
  display: table;
  margin-bottom: 20px;
}
.limit-area ul li .wrapper span {
  font-size: 24px;
  color: #010101;
}
.limit-area ul li .wrapper .line {
  height: 6px;
  margin-top: 12px;
  background-color: #ff6f69;
}

＆＃13;

<div class="limit-area">
  <ul>
    <li>
      <div class="wrapper">
        <span>One line only</span>
        <div class="line"></div>
      </div>
    </li>
    <li>
      <div class="wrapper">
        <span>Bigger one line only </span>
        <div class="line"></div>
      </div>
    </li>
    <li>
      <div class="wrapper">
      <span>Long line and go crazyyyyyy</span>
      <div class="line"></div>
    </div>
  </li>
  </ul>
</div>

＆＃13;

关于jsfiddle的完整示例：https://jsfiddle.net/arnauth/55josw6e/

在上面的示例中，我可以轻松地完成前两个列表项目的目标。

这里的诀窍是当我有一条长行分成两行或更多行时产生相同的效果 - 例子中的第三行。

线条元素的宽度必须与文字的宽度相同，因此示例中的必须在单词“＃”附近停止。 - 不显示在容器的末尾。

我们的想法是尝试使用仅限CSS 规则来解决问题，避免使用基于javascript的代码。

感谢您的关注。

Answer 1

我将width:200px;添加到.wrapper课程。请尝试以下CSS代码：

.limit-area {
  width: 250px;
  height: 350px;
  background-color: #96ceb4;
}
  
ul {
font-size: 0;
list-style-type: none;
-webkit-padding-start: 0;
}

li {
  background-color: #ffeead;
  display: table;
  margin-bottom: 20px;}

.wrapper {
  width:200px;
}

span {
  font-size: 24px;
  color: #010101;
}

.line {
  height: 6px;
  margin-top: 12px;
  background-color: #ff6f69;
}

<div class="limit-area">
  <ul>
    <li>
      <div class="wrapper">
        <span>One line only</span>
        <div class="line"></div>
      </div>
    </li>
    <li>
      <div class="wrapper">
        <span>Bigger one line only </span>
        <div class="line"></div>
      </div>
    </li>
    <li>
      <div class="wrapper">
      <span>Long line and go crazyyyyyy</span>
      <div class="line"></div>
    </div>
  </li>
  </ul>
</div>

Answer 2

尝试在您的范围内添加：

border-bottom: 6px solid #ff6f69;

所以最终看起来像这样：

span {
          font-size: 24px;
          color: #010101;
          border-bottom: 6px solid #ff6f69;
        }

它应该像这样出来 https://jsfiddle.net/55josw6e/3/

希望这能回答你的问题。

当文本包装成多行时，CSS缩小宽度

2 个答案: