靈活/流暢的HTML表單的CSS祕訣是什麼？

下面的HTML/CSS/Javascript（jQuery）代碼顯示#makes選擇框。選擇一個選項將顯示帶有相關選項的#models選擇框。 #makes選擇框偏離中心，#models選擇框在顯示時填充空白區域。靈活/流暢的HTML表單的CSS祕訣是什麼？

如何對窗體進行樣式設置，以便#makes選擇框處於居中狀態，但它是唯一顯示的窗體元素，但是當兩個選擇框都顯示時，它們都位於容器中央？

var cars = [ 
 
    { 
 
    "makes" : "Honda", 
 
    "models" : ['Accord','CRV','Pilot'] 
 
    }, 
 
    { 
 
    "makes" :"Toyota", 
 
    "models" : ['Prius','Camry','Corolla'] 
 
    } 
 
]; 
 

 
$(function() { 
 
    vehicles = [] ; 
 
    for(var i = 0; i < cars.length; i++) { 
 
    vehicles[cars[i].makes] = cars[i].models ; 
 
    } 
 
    var options = ''; 
 
    for (var i = 0; i < cars.length; i++) { 
 
    options += '<option value="' + cars[i].makes + '">' + cars[i].makes + '</option>'; 
 
    } 
 
    $("#make").html(options); // populate select box with array 
 

 
    $("#make").bind("click", function() { 
 
    $("#model").children().remove() ; // clear select box 
 
    var options = ''; 
 
    for (var i = 0; i < vehicles[this.value].length; i++) { 
 
     options += '<option value="' + vehicles[this.value][i] + '">' + 
 
     vehicles[this.value][i] + 
 
     '</option>'; 
 
    } 
 
    $("#model").html(options); // populate select box with array 
 
    $("#models").addClass("show"); 
 
    });  // bind end 
 
});

.hide { 
 
    display: none; 
 
} 
 
.show { 
 
    display: inline; 
 
} 
 
fieldset { 
 
    border: #206ba4 1px solid; 
 
} 
 
fieldset legend { 
 
    margin-top: -.4em; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    color: #206ba4; 
 
} 
 
fieldset fieldset { 
 
    position: relative; 
 
    margin-top: 25px; 
 
    padding-top: .75em; 
 
    background-color: #ebf4fa; 
 
} 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: Verdana; 
 
    font-size: 12px; 
 
    text-align: center; 
 
} 
 
#wrapper { 
 
    margin: 40px auto 0; 
 
} 
 
#myFieldset { 
 
    width: 213px; 
 
} 
 
#area { 
 
    margin: 20px; 
 
} 
 
#area select { 
 
    width: 75px; 
 
    float: left; 
 
} 
 
#area label { 
 
    display: block; 
 
    font-size: 1.1em; 
 
    font-weight: bold; 
 
    color: #000; 
 
} 
 
#area #selection { 
 
    display: block; 
 
} 
 
#makes { 
 
    margin: 5px; 
 
} 
 
#models { 
 
    margin: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 

 
<div id="wrapper"> 
 
    <fieldset id="myFieldset"> 
 
    <legend>Cars</legend> 
 
    <fieldset id="area"> 
 
     <label>Select Make:</label> 
 
     <div id="selection"> 
 
     <div id="makes"> 
 
      <select id="make"size="2"></select> 
 
     </div> 
 
     <div class="hide" id="models"> 
 
      <select id="model" size="3"></select> 
 
     </div> 
 
     </div> 
 
    </fieldset> 
 
    </fieldset> 
 
</div>

來源

2008-09-13 Jay Corbett

從你的問題中不完全清楚你想要實現什麼樣的佈局，但是根據你已經將「float：left」應用到select元素的事實判斷，它看起來像你希望select元素出現在邊上並排。如果是這樣的話，你可以通過執行以下操作做到這一點：

要集中對準你需要添加元素「文本對齊：中心」，包含塊級元素，在這種情況下#selection。
浮動元素的位置不受「text-align」聲明的影響，因此請從select元素中刪除「float：left」聲明。
爲了使#make和#model div並排使用浮動框架，它們必須顯示爲內聯元素，因此將「display：inline」添加到#make和#model中（請注意，此將失去這些元素的垂直邊界，因此您可能需要進行一些其他更改才能獲得您想要的確切佈局）。

由於select元素默認以內聯方式顯示，所以最後一步的替代方法是刪除#make和#model div並直接將「show」和「hide」類應用於模型選擇元素。

來源

2008-09-14 00:46:57

感謝您抽出時間回答。儘管我的問題很模糊，但是你碰到了解決問題所需的領域。 – 2008-09-15 16:42:29

浮動選擇框改變它們的顯示屬性設置爲「塊」。如果你沒有理由浮動它們，只需刪除「float：left」聲明，並將「text-align：center」添加到#makes和#models。

來源

2008-09-14 00:13:19

靈活/流暢的HTML表單的CSS祕訣是什麼？

回答

相關問題