Question

我对这种东西很新。我只是希望我的导航栏从一侧到另一侧覆盖页面，而不是在两侧和顶部都有白色空间。

这是我的CSS

nav ul {list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3E3F43;}

nav li {float: left;}

nav li a {display: block;
       color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;}

li a:hover{background-color: #7559A6;}


Here is my HTML

<nav>

    <ul>
        <li><a href="home.html" class="active">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="resume.html">Resume</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>

</nav>

Answer 1

为您的导航栏添加ID

   <nav id=nav">

并将其宽度设置为100％

    #nav{
    width:100%;
    }

Answer 2

首先，从body

中删除默认边距

 body {
      margin: 0;
    }

然后：

CSS表格

＆＃13;

body {
  margin: 0;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3E3F43;
  display: table;
  width: 100%;
}
nav li {
  display: table-cell
}
nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #7559A6;
}

＆＃13;

<nav>

  <ul>
    <li><a href="home.html" class="active">Home</a>
    </li>
    <li><a href="about.html">About</a>
    </li>
    <li><a href="resume.html">Resume</a>
    </li>
    <li><a href="blog.html">Blog</a>
    </li>
    <li><a href="contact.html">Contact</a>
    </li>
  </ul>

</nav>

＆＃13;

<强> Flexbox的

＆＃13;

body {
  margin: 0;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3E3F43;
  display: flex;
}
nav li {
  flex:1;
}
nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #7559A6;
}

＆＃13;

<nav>

    <ul>
        <li><a href="home.html" class="active">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="resume.html">Resume</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>

</nav>

＆＃13;

Answer 3

添加你的css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head></h:head>
    <h:body>
        <ui:composition template="/templates/BasicTemplate.xhtml">
            <ui:define name="content">
                <div style="background-color: #cfcfcf;
                     border: 1px black dotted; width:95%; margin: 10px;">
                    <h:form id="deleteLessons">
                        <p:dataTable value="#{schb.lessonList}" var="lesson" id="lessonlist" >
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Sal" />
                                </f:facet>

                                <h3>
                                    <h:outputText value="#{lesson.lessonInfo}" />
                                </h3>
                            </p:column>

                            <p:column >
                                <f:facet name="header">
                                    <h:outputText value="Dina bokningar" />
                                </f:facet>

                                <p:commandButton style="width:450px; font-size:15px;height:23px;"
                                                 update="@this"
                                                 value="Radera   #{lesson.lessonInfo}">
                                    <f:setPropertyActionListener value="#{lesson.uuid}"
                                                                 target="#{schb.lesson2delete}" />
                                </p:commandButton>
                            </p:column>
                        </p:dataTable>
                    </h:form>
                </div>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

如何让导航栏覆盖整个页面？

3 个答案: