Question

我需要在三个选择下拉框之间放置相等的空格（左对齐，居中对齐和右对齐）。

我正在使用一些带有以下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中才能使它工作？

Answer 1

margin:auto无法使用float。将特定margin添加到中心项目：

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

Answer 2

这是我的代码。首先将所有三个元素居中，然后将相等的左右边距添加到中心下拉框

 <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>

正确对齐一行中的选择框

2 个答案: