リー項目がCSS

Question

に適切に整列されていない私は、第三のli要素が複数の行を含む場合、いくつかの要素

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

を持ったリストを持っていますか指定された幅を超えていれば、内容が整列していないので、上記の行の下にあるはずです。また、極端な権利にextraCostクラスのスパンを配置する必要がありますが、これは起こっていません。親切に助けてください。ありがとう

Answer 1

リストを整列させたままにするには、list-style-position:outsideを使用する必要があります。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をコードスニペットに置き換えました。あなたのスタイルで

Answer 2

田下は、あなたのUL /李セレクタへのlist-style-位置要素を追加し、外部へのpropery設定：

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