项目符号后在<li>中对齐文本

Question

我如何对齐文本以使其余句子“草拟”成与上面的句子一样？

我尝试添加：

padding-inline-start: 0px;
padding-inline-end: 0px;

但这不起作用...

<div style="padding: 4% 4% 4% 6%; margin-bottom: 4%; box-shadow: 0px 2px 25px 0px rgba(0,0,0,0.15);">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="padding-right: 0px !important;">
<p>&nbsp;</p>

<h1>02. Offer</h1>

<ul>
	<li>&nbsp;&nbsp;&nbsp; Request for company information</li>
	<li>&nbsp;&nbsp;&nbsp; A concept offer is presented in person</li>
	<li>&nbsp;&nbsp;&nbsp; When agreed an intention agreement is drawn up</li>
</ul>
</div>

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><img alt="" src="https://curaeos.cms.dentconnect.eu/dynamic/media/22/images/curaeos-acquisition-process-offer-300x250.jpg" style="width: 300px; height: 250px; float:right;" /></div>
</div>
</div>

Answer 1

您使用 导致了此错误。为什么不使用填充而不是手动添加空格？

HTML：

<ul>
    <li>Request for company information</li>
    <li>A concept offer is presented in person</li>
    <li>When agreed an intention agreement is drawn up</li>
</ul>

CSS：

li{
  padding-left: 15px;
}

Answer 2

您可以将.padding-left添加到li元素中，然后删除   。

ul {
  max-width: 50%;
}
li {
  padding-left: 1em;
}

<div style="padding: 4% 4% 4% 6%; margin-bottom: 4%; box-shadow: 0px 2px 25px 0px rgba(0,0,0,0.15);">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="padding-right: 0px !important;">
<p>&nbsp;</p>

<h1>02. Offer</h1>

<ul>
	<li>Request for company information</li>
	<li>A concept offer is presented in person</li>
	<li>When agreed an intention agreement is drawn up</li>
</ul>
</div>

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><img alt="" src="https://curaeos.cms.dentconnect.eu/dynamic/media/22/images/curaeos-acquisition-process-offer-300x250.jpg" style="width: 300px; height: 250px; float:right;" /></div>
</div>
</div>