Question

如何在这些蓝色块之间为这个白色区域着色？我有这个代码

#nav{
    padding:0;
}
.rech{
    margin-left: 785px;
}
.px{
    margin-left: 3px;
}
#nav li{
    display:inline;
}
#nav li a, .rech{  
   font-family:Arial;
   font-size:12px;
   text-decoration: none;
   float:left;
   padding:10px;
   background-color: #0568CD;
   color:#ffffff;
   border-bottom:1px;
   border-bottom-color:#0568CD;
   border-bottom-style:solid;
}
#nav li a:hover{
   background-color:#9B1C26;
   padding-bottom:12px;
   border-bottom:2px;
   border-bottom-color:#000000;
   border-bottom-style:solid;
   margin:-1px;
}

这是一个截屏 http://nsa34.casimages.com/img/2013/08/12/130812073042816473.jpg

这是我的HTML代码，

> <%@ page pageEncoding="UTF-8" %>
>     <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
>     <!DOCTYPE html>
>     <html>
>         <div>
>           <link type="text/css" rel="stylesheet" href="<c:url value="/inc/form.css"/>" />
>             <ul id="nav">
>                   <li><a href="/projetForum/accueil" class="px">Forum</a></li>
>                   <c:if test="${!empty sessionScope.sessionUtilisateur}">
>                   <li><a href="/projetForum/deconnexion">Profil</a></li>
>                       <li><a href="/projetForum/deconnexion">Se déconnecter</a></li>
>                 </c:if>
>                 <c:if test="${empty sessionScope.sessionUtilisateur}">
>                   <li><a href="/projetForum/connexion">Se connecter</a></li>
>                   <li><a href="/projetForum/inscription">S'inscrire</a></li>
>                 </c:if>
>               <li><a href="/projetForum/contactus">Nous contacter</a></li>
>               <li><input type="text" id="rechercher" name="rechercher" value="Recherche" size="20" maxlength="20" class="rech"/></li>
>           </ul>
>         </div>
>     </html>

（格式化的html代码在帖子中显示）

Answer 1

试试这个：

#nav {
  background: #0568CD;
  display:block;
  overflow: auto;
}

将#nav设置为block将使其全宽，而溢出：auto意味着它将扩展到浮动元素的高度。

Answer 2

body{background-color:black}

此属性定义背景窗口的颜色。

我用黑色做了一个例子，但你可以使用你想要的每种颜色。

Answer 3

让人不知道你的HTML结构是什么样子有点困难，但是你尝试过设计ul吗？

#nav ul {
  background-color: #0568CD;
}

Answer 4

在该元素上使用background-color or background css属性。

当我看到您使用的是谷歌浏览器浏览器时，请按右键单击要设置颜色的元素，然后单击“检查元素”。这应该显示您必须添加样式的元素。

您可以使用右侧的“样式”标签快速编辑并在Chrome中预览，但请记住，当您刷新页面时这会丢失，因此请务必在代码中进行设置。

示例：

background-color: gray;

或

background: gray;

如果您只想设置颜色，建议使用background-color。此外，建议使用十六进制代码（例如 #cccccc ）代替颜色名称（例如灰色），因为浏览器可能会以不同方式呈现它。

Answer 5

我希望你在JSFiddle上向我们展示这个，或者至少上传你的HTML。

无论如何，我根据你提供的信息假设：

#nav {
background-color: blue;
}

如何使用css为白色区域着色

5 个答案: