為什么Flex:Direction在CSS/Flask中不起作用

我有一個簡單的 UI 設定，我想讓所有元素水平作業。當我使用下面的代碼時，兩個部分中的較低部分總是水平作業，但頂部總是堆疊。如果我添加第三個精確副本，則第二個和第三個元素將是正確的，但頂部的元素始終是垂直的。即使我在不??同的 div 中復制完全相同的代碼兩到三遍。

<!--Flags-->

<div class="tags" style="padding: 0% 5 0 0; display:flex; flex-direction: row; justify-content: center; align-items: center">
    <form method="get">
    
    <p>
        <b><label for="flags">Include</label></b>
    </p>
    
    <p>
        <input id="flags-1" name="flags" type="checkbox" value="Sex">
        <label for="flags-1">Sex & Nudity</label>
    </p>

    
    <p>
        <input id="flags-2" name="flags" type="checkbox" value="Drugs">
        <label for="flags-2">Drugs,Alcohol & Smoking</label>
    </p>
    
    <p>
        <input id="flags-3" name="flags" type="checkbox" value="Violence">
        <label for="flags-3">Violence & Gore</label>
    </p>
    
    <p>
        <input id="flags-4" name="flags" type="checkbox" value="Profanity">
        <label for="flags-4">Profanity</label>
    </p>
    
</div>

<br>

<div class="tags" style="padding: 0% 5 0 0; display:flex; flex-direction: row; justify-content: center; align-items: center">
    <form method="get">
    <p>
        <b><label for="flags">Exclude</label></b>
    </p>
    
        <p>
            <input id="flags-1" name="flags" type="checkbox" value="Sex">
            <label for="flags-1">Sex & Nudity</label>
        </p>
        
        <p>
            <input id="flags-2" name="flags" type="checkbox" value="Drugs">
            <label for="flags-2">Drugs,Alcohol & Smoking</label>
        </p>
        
        <p>
            <input id="flags-3" name="flags" type="checkbox" value="Violence">
            <label for="flags-3">Violence & Gore</label>
        </p>
                
        <p>
            <input id="flags-4" name="flags" type="checkbox" value="Profanity">
            <label for="flags-4">Profanity</label>
        </p>
        
</div>

<!--End Flags-->

uj5u.com熱心網友回復：

發生不一致是因為您沒有關閉<form>標簽。如果您希望表單水平布局，請將彈性框代碼移動到<form>標簽并在選單選項后關閉表單。

當您在 div 上設定 flex 選項時，您說的是“<form>在此居中<div>”，但是當您在<form>標簽級別設定它時，您說的是“將<p>標簽作為表單中的一行居中”

<!--Flags-->

<div >
    <form class="tags" style="padding: 0% 5 0 0; display:flex; flex-direction: row; justify-content: center; align-items: center" method="get">
    
    <p>
        <b><label for="flags">Include</label></b>
    </p>
    
    <p>
        <input id="flags-1" name="flags" type="checkbox" value="Sex">
        <label for="flags-1">Sex & Nudity</label>
    </p>

    
    <p>
        <input id="flags-2" name="flags" type="checkbox" value="Drugs">
        <label for="flags-2">Drugs,Alcohol & Smoking</label>
    </p>
    
    <p>
        <input id="flags-3" name="flags" type="checkbox" value="Violence">
        <label for="flags-3">Violence & Gore</label>
    </p>
    
    <p>
        <input id="flags-4" name="flags" type="checkbox" value="Profanity">
        <label for="flags-4">Profanity</label>
    </p>
    </form>
</div>

<br>

<div >
    <form class="tags" style="padding: 0% 5 0 0; display:flex; flex-direction: row; justify-content: center; align-items: center" method="get">
    
    <p>
        <b><label for="flags">Include</label></b>
    </p>
    
    <p>
        <input id="flags-1" name="flags" type="checkbox" value="Sex">
        <label for="flags-1">Sex & Nudity</label>
    </p>

    
    <p>
        <input id="flags-2" name="flags" type="checkbox" value="Drugs">
        <label for="flags-2">Drugs,Alcohol & Smoking</label>
    </p>
    
    <p>
        <input id="flags-3" name="flags" type="checkbox" value="Violence">
        <label for="flags-3">Violence & Gore</label>
    </p>
    
    <p>
        <input id="flags-4" name="flags" type="checkbox" value="Profanity">
        <label for="flags-4">Profanity</label>
    </p>
    </form>
</div>



<!--End Flags-->

標籤：htmlcss

上一篇：如何將當前畫布存盤在陣列中？

下一篇：如何使用帶有代碼的不同頁面在html中構建明暗模式？