如何左對齊文本？

Question

我有包含兩個步驟的腳本，我想對齊文本，例如：

Step1 : I am a boy........
my name is Ram```

但我想將文本對齊為

Step1 : I am a boy........
        my name is Ram```

我嘗試了 text-align 和 align 屬性來跨越。

 p.steps { color: #000; margin-bottom: 10px; font-size: 20px; font-weight: normal; font-family: 'Montserrat'; line-height: 1.2; margin-top: 20px; text-align: left; }

 <p class="steps"> <span style="color:#BB2812">Step1 : </span> I am a boy................. my name is Ram</p> <p class="steps"> <span style="color:#BB2812">Step2 : </span> There are many countries but I live in Australia </p>

Answer 1

表格布局可以解決問題

 p.steps { color: #000; margin-bottom: 10px; font-size: 20px; font-weight: normal; font-family: 'Montserrat'; line-height: 1.2; margin-top: 20px; text-align: left; display:table; /* here */ } p.steps span { display:table-cell; /* here */ white-space:nowrap; /* and here */ padding-right:5px; }

 <p class="steps"> <span style="color:#BB2812">Step1 : </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque urna at ex fermentum egestas. Nullam convallis nec dolor finibus rhoncus. Nunc neque nisi,</p> <p class="steps"> <span style="color:#BB2812">Step2 : </span> There are many countries but I live in Australia </p>

Answer 2

有很多方法可以做到。 你可以使用 flexbox 來做到這一點。

將display: flex添加到p元素。

 p.steps { display: flex; color: #000; margin-bottom: 10px; font-size: 20px; font-weight: normal; font-family: 'Montserrat'; line-height: 1.2; margin-top: 20px; text-align: left; } .step { display: block; color: #BB2812; } .step-content { flex: 1; }

 <p class="steps"> <span class="step">Step 1:</span> <span class="step-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada non ex consectetur posuere. Vestibulum in leo tempus dolor pharetra ultricies. </span> </p> <p class="steps"> <span class="step">Step 2:</span> <span class="step-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada non ex consectetur posuere. Vestibulum in leo tempus dolor pharetra ultricies. </span> </p>

Answer 3

有很多可能的解決方案（ table 、 flex 、 text-indent等），但只要它是有序列表，我就會使用ol和li在語義上是正確的。 您可以使用:before偽元素創建自己list-style類似list-style元素，該偽元素可以實現elementcounter 。

 ol { list-style-type: none; counter-reset: elementcounter; padding-left: 0; } li { position: relative; padding-left: 3.5rem; } li:before { content: "Step " counter(elementcounter) ":"; counter-increment: elementcounter; font-weight: bold; position: absolute; left: 0; top: 0; }

 <ol> <li>I am a boy...<br/> my name is Ram</li> <li>There are many countries but I live in Australia</li> </ol>

Answer 4

使用div簡單方法。

 p.steps { color: #000; margin-bottom: 10px; font-size: 20px; font-weight: normal; font-family: 'Montserrat'; line-height: 1.2; margin-top: 20px; text-align: left; }

 <div class="steps"> <div style="color:#BB2812; float: left; width: 8%;">Step1 : </div> <div style="float: left; width: 91%;"> I am a boy................. <br>my name is Ram</div> </div> <div class="steps"> <div style="color:#BB2812; float: left; width: 8%;">Step2 : </div> <div style="float: left; width: 91%;">There are many countries but I live in Australia </div> </div>

Answer 5

這感覺就像一個解決方案，可以通過使用網格布局修改 dt/dd 來達到最佳效果。 下面是一個例子：

 .steps { display: grid; grid-template-columns: auto 1fr; grid-gap: 0.5em 0; color: #000; margin-bottom: 10px; font-size: 20px; font-weight: normal; font-family: 'Montserrat'; line-height: 1.2; margin-top: 20px; text-align: left; } .steps dt { color: #BB2812; } .steps dt::after { content: ' : '; }

 <dl class="steps"> <dt>Step 1</dt> <dd>I am a boy.................<br>my name is Ram</dd> <dt>Step 2</dt> <dd>There are many countries but I live in Australia</dd> </dl>