正確對齊一行中的選擇框

我需要在三個選擇下拉框之間放置相等的空間（左對齊，居中對齊和右對齊）。正確對齊一行中的選擇框

我使用一些預先定義templets與下面的CSS：

.view-display-id-page .views-widget-filter-tid { 
    float: left; 
    margin: auto; 
    width: 30%; 
} 

.view-display-id-page .views-widget-filter-tid_1 { 
    float: left; 
    margin: auto; 
    width: 30%; 
} 

.view-display-id-page .views-widget-filter-tid_2 { 
    float: left; 
    margin: auto; 
    width: 30%; 
}

我只是想知道還有什麼我可以添加到CSS，使其工作？

來源

2017-05-08 viz12

它現在的樣子是什麼？ – Darren

我已附上圖片（第二行）。 – viz12

是的，我接受了其中一個答案。 – viz12

margin:auto將無法在float上工作。添加特定的margin到中心項目：

.view-display-id-page .views-widget-filter-tid_1 { 
    float:left; 
    margin: 0 5%; 
    width:30%; 
}

來源

2017-05-08 21:00:17 Blazemonger

它的工作！謝謝！ – viz12

這是我的代碼。首先將所有三個元素居中，然後將相等的左右邊距添加到中心下拉框中

<html> 
<style type="text/css"> 
/** all the three elements are centred*/  
    .main 
    {width: 400px; 
     height: 100px; 
     text-align: center; 
     margin: 200px auto 20px auto;} 
/** provide the necessar spacing you need**/ 
    .centre{margin: 0px 50px 0px 50px;} 

    </style> 


<body> 
<form> 

    <div class="main"> 
    <select class="left"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="opel">Opel</option> 
    <option value="audi">Audi</option> 
</select> 
    <select class="centre"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="opel">Opel</option> 
    <option value="audi">Audi</option> 
</select> 
    <select class="right"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="opel">Opel</option> 
    <option value="audi">Audi</option> 
</select> 
     </div> 
    </form> 
    </body> 

</html>

來源

2017-05-08 21:23:52 bhuvaneshnick

正確對齊一行中的選擇框

回答

相關問題