css - 跨越多行的 li 项在 css 中未正确对齐

Question

我有一个列表，其中的元素很少

<style>.passengerBaggageList>ul li:first-child {
  list-style-type: none!important;
  list-style-position: inherit;
  padding: 0!important;
  width: 246.1pt;
}

.passengerBaggageList>ul li:not(first-child) {
  list-style: disc inside;
  width: 178pt;
}

.passengerBaggageList ul:not(:first-child) {
  margin: 13pt 0 0 0;
}

.extraLuggageCost {
  margin-right: 16pt;
}

</style>

<div class="passengerBaggageList">
  <ul class="passengersLuggageList">
    <li>Mr.John Doe</li>
    <li>1 checked baggage</li>
    <li>1 extra checked baggage<span class="extraLuggageCost"> EUR 20</span>
    </li>
  </ul>
  <ul class="passengersLuggageList">
    <li>Mrs. Bea Doe</li>
    <li>1 checked baggage</li>
    <li>1 extra checked baggage</li>
  </ul>
</div>

当第三个 li 元素包含多行或超过指定宽度时，内容未对齐，应恰好位于上一行下方。我还需要将 extraCost 类的跨度放在最右边，但这并没有发生。请帮忙。谢谢

Answer 1

为了使列表保持对齐，您必须使用 list-style-position:outside，这会将元素符号点移出元素。在你的例子中，我把它放在 list-style : disc outside;

这是一个代码片段:

ul li:first-child{
    list-style-type: none!important;
    padding : 0!important;
    width : 246.1pt;
}

ul li:not(first-child){
    list-style : disc outside;
    width : 178pt;
}

ul:not(:first-child){
    margin: 13pt 0 0 0;
}

.extraCost{
    margin-right: 16pt;
}

<ul>
    <li>Mr. JOHN DOE</li>
    <li>1 extra luggage</li>
    <li>1 checked extra luggage for the adult will cost the passenger the following cost from the book described by airline laws<span class="extraCost"> EUR 20</span></li>
</ul>

编辑:超出元素，不是父元素

Edit2:删除了 JSFiddle 并将其替换为代码片段。