2016-09-28 76 views
0

我已使用display:flex来设置多个单选按钮的样式,以便它们并排显示,而不是一长列。我认为通过将margin:auto与此结合使用,子元素将显示为分组,但在页面的中心水平。显然情况并非如此,所以任何帮助,将不胜感激请。使用display:flex时,如何水平对齐一组单选按钮(和标签):flex将它们并排堆叠

这是我目前有:

input[type="radio"] { 
 
    display: none; 
 
} 
 
input[type="radio"]:checked + label { 
 
    background-color: red; 
 
    display: inline-block; 
 
    line-height: 4vw; 
 
    text-align: center; 
 
    width: 18vw; 
 
} 
 
label { 
 
    background-color: orange; 
 
    display: inline-block; 
 
    line-height: 4vw; 
 
    color: white; 
 
    text-align: center; 
 
    width: 18vw; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<section style="display:flex; margin:auto;"> 
 
    <div> 
 
     <p>Amount:</p> 
 
     </br> 
 
     <input type="radio" name="Amount" id="Amount1" value="single"/checked> 
 
     <label for="Amount1">Amount 1</label> 
 
     </br> 
 
     </br> 
 
     <input type="radio" name="Amount" id="Amount2" value="multi" /> 
 
     <label for="Amount2">Amount 2</label> 
 
    </div> 
 
    <span style="width:5vw;display:inline-block"></span> 
 
    <div> 
 
     <p>Term:</p> 
 
     </br> 
 
     <input type="radio" name="Term" id="Term1" value="0"/checked> 
 
     <label for="Term1">Term 1</label> 
 
     </br> 
 
     </br> 
 
     <input type="radio" name="Term" id="Term2" value="1" /> 
 
     <label for="Term2">Term 2</label> 
 
    </div> 
 
    <span style="width:5vw;display:inline-block"></span> 
 
    <div> 
 
     <p>Phone:</p> 
 
     </br> 
 
     <input type="radio" name="Phone" id="Phone1" value="0"/checked> 
 
     <label for="Phone1">Phone 1</label> 
 
     </br> 
 
     </br> 
 
     <input type="radio" name="Phone" id="Phone2" value="1" /> 
 
     <label for="Phone2">Phone 2</label> 
 
    </div> 
 
</section>

我已经使用宽视整个项目,因为我有进一步的CSS样式改变基于媒体查询元素大小。所以我需要一个解决方案,如果可能的话,仍然保持这种风格。

回答

1

使用以下应该有所帮助:

justify-content: center 

display:flex类。

来源:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

+0

完美,谢谢。我知道有一个简单的答案,我只是不知道。如果能够这样做,我会接受答案。 –

+0

很高兴帮助!我建议你阅读我添加的源代码链接。如果您知道如何使用Flexbox,Flexbox功能非常强大。 – adamk22

+0

我已收藏书签,并且一定会接受它,谢谢。 –