HTMLコンテンツを正当化し、私はその内容が中央に整列されているdiv要素を作成しようとしています

Question

.d1 { 
 
    background-color: red; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.s1 { 
 
    color: blue; 
 
}

<div class="d1"> 
 
    <u>list:</u> 
 
    <br>item1 
 
    <br>item2 
 
    <br><span class="s1">item3</span> 
 
</div>

またがります。私は1つ、他の下のテキストlist: item1 item2 item3を表示するには、上記のコードを使用し、list:は下線とitem3青の色を持っているが、これはとても奇妙な結果得られます。

item1とitem2しかしitem3です...上を先頭と末尾でlist: ...問題は何ですか？これをどのように修正できますか？ Ty

Answer 1

代わりにflexではなくinline-blockとラッパー<div>を使用しないでこれを修正できます。

.d1 { 
 
    background-color: red; 
 
    text-align: center; 
 
} 
 
.d2 { 
 
    display: inline-block; 
 
    text-align: left; 
 
} 
 
.s1 { 
 
    color: blue; 
 
}

<div class="d1"> 
 
    <div class="d2"> 
 
     <u>list:</u> 
 
     <br>item1 
 
     <br>item2 
 
     <br><span class="s1">item3</span> 
 
    </div> 
 
</div>

Answer 2

<li>を<u>と一緒に使用し、u li {list-style-type: none;}を追加すると、リストアイテムサークルを無効にすることができます。

.d1 { 
 
    background-color: red; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.s1 { 
 
    color: blue; 
 
} 
 
u li {list-style-type: none;}

<div class="d1"> 
 
    <u>list: 
 
    <li>item1</li> 
 
    <li>item2</li> 
 
    <li><span class="s1">item3</span></li> 
 
    </u> 
 
</div>

Answer 3

.d1 { 
 
    background-color: red; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-direction: column; 
 
} 
 
.s1 { 
 
    color: blue; 
 
}

<div class="d1"> 
 
    <u>list:</u> 
 
    <br>item1 
 
    <br>item2 
 
    <br><span class="s1">item3</span> 
 
</div>

結果大丈夫：この

チェック！

Answer 4

あなたはここで、このようなソートされていないリストのご利用状況にすることができます：あなたは私がそれを知っている、より具体的な解決策が必要な場合は を！

.d1 { 
 
    background-color: red; 
 
    justify-content: center; 
 
    display: block; 
 
    text-align: center 
 
} 
 
.s1 { 
 
    color: blue; 
 
}

<div class="d1"> 
 
<p>Items:</p> 
 
<lu> 
 
    <li>item1</li> 
 
    <li>item2</li> 
 
    <li><span class="s1">item3</span></li> 
 
</lu> 
 
</div>

Answer 5

あなたは<u>タグと "表示：フレックス" を使用した理由。 display:flexを使用する場合、その子ノードは全体の高さをとり、<u>list:</u>,<span class="s1">item3</span>がこれを行い、3つの列を作成しました。他のコンテンツの他に、子ノードとはみなされない。 linkを見ると、フレックスのアイデアをクリアする