掉線消失並且不能居中按鈕

Question

我在開始時承認：這是我第一次嘗試HTML/CSS編碼。所以請原諒我的代碼的混亂。

我有兩個問題：1.當我將瀏覽器窗口縮小到足以看到滾動條時，我的三個下拉菜單消失。 2.我試圖將我的按鈕居中（查找資源），但無法弄清楚。我嘗試過自動調整左右邊距，我嘗試了文本對齊方式，但是它弄亂了我的三個框（其寬度爲200px）的位置。

感謝您提供任何幫助！

HTML：

<div id="resource-wrapper"> 

<div id="content"> 
    <p class="resource-p">Welcome to Our Resource Center.</p> 
    <p class="resource-p">How may we help you?</p> 
</div> 

<div id=buttons-div>  
<div id=select> 
    <select class="dropdown" name="field_related_brands_nid"> 
     <option value="All" selected="selected">Any</option> 
     <option value="2511">Sample</option> 
    </select> 
    <select class="dropdown-2" name="field_related_technology_nid"> 
     <option value="All" selected="selected">Any</option> 
     <option value="444">Sample</option> 
    </select> 
    <select class="dropdown-3" name="field_resource_type_value_many_to_one"> 
     <option value="All" selected="selected">Any</option> 
     <option value="multimedia">Sample</option> 
    </select> 
</div> 
<div id=buttons>  
    <img src="Images/Buttons1.jpg" class="resource-image"> 
    <img src="Images/Buttons2.jpg" class="resource-image"> 
    <img src="Images/buttons3.jpg" class="resource-image"> 
</div> 
<button type="submit" class="resource-p1">Find Resources</button> 
</div> 

</div> 

CSS：

#resource-wrapper { 
width: 850px; 
margin: 0 auto;} 

#content { 
background-color: #669bcf; 
padding: 1px; 
width: 100%;} 

.resource-p { 
text-align: center; 
font-size: 30px; 
font-family: sans-serif; 
color: white; 
line-height: 15px} 

#buttons-div { 
position: relative; 
width: 850px;} 

#select { 
position: fixed; 
margin-top: 214px; 
width: 850px;} 

.dropdown { 
width: 160px; 
margin-left: 78px;} 

.dropdown-2 { 
width: 125px; 
margin-left: 115px;} 

.dropdown-3 { 
width: 95px; 
margin-left: 148px;} 

.resource-image { 
margin: 50px 0 0 58px;} 

.resource-p1 { 
padding: 16px 18px 13px 18px; 
margin: 20px; 
text-align: center; 
font-size: 21px; 
font-family: sans-serif; 
color: white; 
font-weight: bold; 
background-color: #669bcf; 
border-style: solid; 
border-width: 1px 1px 3px 1px; 
border-color: #d7e4f4; 
border-radius: 5px;} 

Answer 1

你的下拉框不應該堆如無響應在您的網站。如果它們的寬度設置爲800px;他們應該沒問題。但是請務必把所有的ID與報價包圍：

<div id=buttons-div> 

應該

<div id="buttons-div"> 

到中心的資源按鈕：

.resource-p1 { 
    margin: 12px auto; 
    text-align: center; 
    font-size: 21px; 
    font-family: sans-serif; 
    color: white; 
    font-weight: bold; 
    background-color: #669bcf; 
    border-style: solid; 
    border-width: 1px 1px 3px 1px; 
    border-color: #d7e4f4; 
    border-radius: 5px; 
    display: block; 
} 

Answer 2

DEMO

1）改變#select的position從fixed到absolute

2）裹在一個容器中的按鈕，並給該容器text-align:center

HTML

<div id="find-resources-container"> 
      <button type="submit" class="resource-p1">Find Resources</button> 
</div> 

CSS

#find-resources-container { 
text-align:center 
}