Question

好的，我重新开始。

即使按钮文本有多行文本，我也需要帮助将按钮和伪子弹放在一行中。

HTML

<ol>
    <li>
        <button>What happens when the button get very long? Will it still work out or will something bad happen? Hmm...</button>
        <p>Answer!</p>
    </li>
</ol>

CSS

ol {
    margin: 0;
    padding: 0;
    list-style-type: none;
    counter-reset: item;
}

ol li {
    margin: 0;
    background-color: darkcyan;
    display: block;
}

ol li::before {
    content: counter(item) " ";
    counter-increment: item;
    background-color: darkgoldenrod;
}

ol button {
    display: inline;
    vertical-align: middle;
    text-align: justify;
    font-family: Segoe UI;
    font-size: 1em;
    color: #EEE;
}

JSFiddle：https://jsfiddle.net/018rzjht/

Answer 1

您可以限制按钮的宽度：

.dialogue-container ol button{
width: calc(100% - 15px);
}

15px是你想要为这些数字留出多少空间。

如果您希望单击时按钮的位置不变，则还应定义before elements width。 Alsofor要生效，你应该将显示块添加到id，并使其向右浮动：

.dialogue-container ol li::before {
    display: block;
    width: 15px;
    float: left;
}

Answer 2

您可以将按钮的宽度设置为小于100％并且它将在同一行中，您不需要浮动，只需要width: 95%;或您想要的百分比

Answer 3

首先，您应该从内容中隔离自定义 :: before 列表计数器。围绕内容创建包装器。然后使用一些简单的Flexbox，您可以从内容本身控制列表计数器。您的列表项也存在一些计数问题。通过仅定位父母的直接后代，计数保持在轨道上。

.ordered-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  counter-reset: item;
  display: inline;
  color: #C5BF9E;
}

.ordered-list > li {
  display: flex;
  flex-direction: row;
}

.ordered-list > li::before {
  content: counter(item) "";
  counter-increment: item;
  margin-right: 17px;
}

.ordered-list p {
  margin-top: 0;
}

<ol class="ordered-list">
  <li>
    <div class="content">
      <button type="button" class="trigger-1"><span>Ihr woll<span style="letter-spacing: 1.5px">t</span>, dass ich <span style="letter-spacing: 1.3px">f</span>ür Eu<span style="letter-spacing: 1.3px">r</span>e schlec<span style="letter-spacing: 0.9px">h</span><span style="letter-spacing: 1px">t</span>en E<span style="letter-spacing: 0.9px">n</span><span style="letter-spacing: 1.5px">t</span>scheidungen b<span style="letter-spacing: 1.3px">e</span><span style="letter-spacing: 1.5px">z</span>ahle? LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM</span></button>

										<p>Wenn Ihr das so sag<span style="letter-spacing: 1.5px">t</span>, klin<span style="letter-spacing: 1px">g</span>t das i<span style="letter-spacing: 1.5px">r</span>gen<span style="letter-spacing: 1px">d</span><span style="letter-spacing: 1.2px">w</span>ie <span style="letter-spacing: 1.5px">v</span>iel schlimmer. <br>Se<span style="letter-spacing: 0.9px">h</span>t es als Da<span style="letter-spacing: 1.5px">r</span>lehen a<span style="letter-spacing: 1.5px">n</span>. Ihr <span style="letter-spacing: 1.3px">w</span>i<span style="letter-spacing: 0.9px">s</span><span style="letter-spacing: 1.3px">s</span><span style="letter-spacing: 1.5px">t</span>, dass ich es <span style="letter-spacing: 1.2px">z</span>u<span style="letter-spacing: 1.5px">r</span>ü<span style="letter-spacing: 1px">c</span><span style="letter-spacing: 2.3px">k</span><span style="letter-spacing: 1.5px">z</span>ahlen kan<span style="letter-spacing: 1.5px">n</span>. Ich habe ein eh<span style="letter-spacing: 1.5px">r</span>liches Gesich<span style="letter-spacing: 2px">t</span>.</p>

										<ol>

											<li><p>In O<span style="letter-spacing: 1.3px">r</span>dnu<span style="letter-spacing: 1px">n</span><span style="letter-spacing: 1.2px">g</span>. Hier ist e<span style="letter-spacing: 2px">t</span>was Gol<span style="letter-spacing: 1.2px">d</span>, um Euch au<span style="letter-spacing: 1.4px">s</span><span style="letter-spacing: 1.2px">z</span>uhe<span style="letter-spacing: 0.9px">l</span><span style="letter-spacing: 1.1px">f</span>e<span style="letter-spacing: 1.5px">n</span>.</p></li>

											<li><p>Nei<span style="letter-spacing: 1.5px">n</span>, <span style="letter-spacing: 1px">i</span>ch we<span style="letter-spacing: 1.3px">r</span>de Euch kein Gold gebe<span style="letter-spacing: 1.5px">n</span>.</p></li>

											<li><p><span style="letter-spacing: 1.2px">L</span>e<span style="letter-spacing: 1px">b</span>t <span style="letter-spacing: 1px">w</span>o<span style="letter-spacing: 1.2px">h</span><span style="letter-spacing: 1.3px">l</span>.</p></li>

										</ol>

    </div></li>

									<li>

										<p><span style="letter-spacing: 1.2px">L</span>e<span style="letter-spacing: 1px">b</span>t                 <span style="letter-spacing: 1px">w</span>o<span style="letter-spacing: 1.2px">h</span><span style="letter-spacing: 1.3px">l</span>.</p>

  </li>
</ol>

https://codepen.io/shashi_lo/pen/WJYxom

Answer 4

所以我终于找到了解决方案，我想我应该在这里分享。

这是基于Shashi Lo建议使用flexbox，但我需要以不同方式构建它，这样就不会产生任何不必要的副作用。

结果如下：

https://jsfiddle.net/cdjc6fk5/

HTML

<ol>
    <li>
        <button type="button">Ihr woll<span style="letter-spacing: 1.5px">t</span>, dass ich <span style="letter-spacing: 1.3px">f</span>ür Eu<span style="letter-spacing: 1.3px">r</span>e schlec<span style="letter-spacing: 0.9px">h</span><span style="letter-spacing: 1px">t</span>en E<span style="letter-spacing: 0.9px">n</span><span style="letter-spacing: 1.5px">t</span>scheidungen b<span style="letter-spacing: 1.3px">e</span><span style="letter-spacing: 1.5px">z</span>ahle?</button>
    </li>

    <p>
        Wenn Ihr das so sag<span style="letter-spacing: 1.5px">t</span>, klin<span style="letter-spacing: 1px">g</span>t das i<span style="letter-spacing: 1.5px">r</span>gen<span style="letter-spacing: 1px">d</span><span style="letter-spacing: 1.2px">w</span>ie <span style="letter-spacing: 1.5px">v</span>iel schlimmer. <br>Se<span style="letter-spacing: 0.9px">h</span>t es als Da<span style="letter-spacing: 1.5px">r</span>lehen a<span style="letter-spacing: 1.5px">n</span>. Ihr <span style="letter-spacing: 1.3px">w</span>i<span style="letter-spacing: 0.9px">s</span><span style="letter-spacing: 1.3px">s</span><span style="letter-spacing: 1.5px">t</span>, dass ich es <span style="letter-spacing: 1.2px">z</span>u<span style="letter-spacing: 1.5px">r</span>ü<span style="letter-spacing: 1px">c</span><span style="letter-spacing: 2.3px">k</span><span style="letter-spacing: 1.5px">z</span>ahlen kan<span style="letter-spacing: 1.5px">n</span>. Ich habe ein eh<span style="letter-spacing: 1.5px">r</span>liches Gesich<span style="letter-spacing: 2px">t</span>.

    </p>

</ol>

CSS

ol {
margin: 4px 0 0 24px;
padding: 0;
background-color: limegreen;
list-style-type: none;
counter-reset: item;
}

ol li {
background-color: darkcyan;
margin: 0;
padding: 0;
display: flex;
flex-wrap: nowrap;
}

ol li::before {
width: 16px;
background-color: darkred;
counter-increment: item;
content: counter(item) "";
font-family: Segoe UI Semibold;
color: #C5BF9E;
}

button {
width: 100%;
margin: 0;
padding: 0;
background-color: black;
border: none;
outline: none;
vertical-align: top;
text-align: justify;
font-family: Segoe UI;
font-size: 1em;
color: #C5BF9E;
cursor: pointer;
}

button:hover { color: #EECA2A; }

ol p {
width: calc(100% - 16px);
margin: 0;
padding-left: 16px;
background-color: red;
font-family: Segoe UI;
font-size: 1em;
}

按钮不会与列表项目符号保持一致

4 个答案: