下拉列表消失和不能居中按钮

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

你的下拉列表不应该堆叠，因为你的站点没有任何响应。如果它们有一个像width: 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

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   
}