为什么Flex:CSS/烧瓶中的方向不起作用

Question

我有一个简单的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-->

​

​

Answer 1

之所以出现不一致，是因为您没有关闭<form>标记。如果希望窗体水平布局，请将flex框代码移动到<form>标记，并在菜单选项之后关闭表单。

当您在div上设置flex选项时，您说的是“<form> on this <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-->