我的CSS只是部分工作,我的文字是对齐的,但我没有背景颜色或我的下拉菜单居中

时间:2016-06-09 20:28:51

标签: html css

我的CSS样式表显然是正确链接的,因为我的文本正确居中,但我的背景没有着色,我的下拉菜单没有居中,我需要帮助。我已经检查过并经过双重检查,但我没有看到任何错误,但它没有工作。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>home</title>
<link rel="stylesheet" type="text/css" href="CSS/travelersaidcss.css">
</head>

<body class="home">
<h1 class="homelang">Home Language</h1>
<div>
<select class="homelang" name="homelang">
    <option value="English">English</option>
    <option value="French">French</option>
    <option value="German">German</option>
    <option value="Dutch">Dutch</option>
    <option value="mandrin">mandrin</option>
</select>
</div>

//backgroundimage//

<div>
<h1 class="destinationlang">Destination Language</h1>
    <select id="destinationlang" name="destinationlang">
    <option value="English">English</option>
    <option value="French">French</option>
    <option value="German">German</option>
    <option value="Dutch">Dutch</option>
    <option value="mandrin">mandrin</option>
    </select> 
    <br />
</div>
<button>Done <img src="images/arrow.png" /></button>
</body>
</html>

CSS:

body {
background-color: rgb(84,163,188);}

h1 {
font-family: Verdana;
font-size: 40px;
text-align: center;
color: rgb(0,0,0);
}

div {
margin-left: auto;
margin-right: auto;
}

button {
background-color: rgb(84,163,188);
}

3 个答案:

答案 0 :(得分:0)

测试背景颜色是否被分配的好方法是尝试使用您知道可以使用的简单方法。尝试更改背景颜色:红色;例如。如果它有效,您知道您可以分配背景颜色。正如之前的回答所说的那样,你错过了&#39; a&#39;从rgba,因此也不透明。

答案 1 :(得分:0)

如果我复制并粘贴此代码,您的背景颜色可以正常工作。您的div不居中,因为您必须为margin-left / margin-right设置div的宽度以便进行居中。现在它以100%的宽度“居中”,边距为0。

您还可以尝试使用text-align:center到div中的内容。

答案 2 :(得分:0)

背景颜色似乎工作正常。如果您要做的就是将下拉列表集中,请将其添加到您的css:

select {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

或者,在下拉列表的容器上发送text-align:center:

div {
  text-align: center;
}