Question

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

＆＃13;

<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>

＆＃13;

<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>

＆＃13;

当第三个li元素包含多个行或超过指定的宽度时，内容未对齐，它应该在上面的行下面是exaclty。另外，我需要将extraCost类的范围放到最右边，这是不会发生的。请帮助。感谢

Answer 1

为了使列表保持对齐，您必须使用getline()，这会将子弹点移出元素。在您的示例中，我将其放在list-style-position:outside

中

这是一个代码段：

＆＃13;

list-style : disc outside;

＆＃13;

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;
}

＆＃13;

编辑：超出元素，而不是父元素

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

Answer 2

在你的样式中，在你的ul / li选择器中添加一个list-style-position元素，并将其设置为外部：

ul li:not(first-child){
    list-style : disc inside;
    width : 178pt;
    text-align: left;
    list-style-position: outside;
}

跨越多行的li项目在css

2 个答案: