如何在html或css中设置<nav>的高度

问题描述 投票：0回答：3

如何减小 CSS 中 

<nav>
标签的大小？我似乎无法弄清楚。我在下面提供了我的项目中的所有代码。我的代码确实有 PHP，但由于没有必要，我已将其删除。如果您想预览那里的代码，这里有一个 JSFiddle。

HTML 和 CSS：

#top-menu {
  top: 0;
  position: fixed;
}
nav {
  position: relative;
  /*float: left;*/
  width: 100%;
  background: #1E1E1E;
  /*    display: table; */
  margin: 0;
  text-align: center;
  height: 25px;
  border: none;
  border-width: 0;
  margin: 0;
  padding: 10px 10px;
}
nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: block;
  border: none;
  border-width: 0;
}
nav ul {
  background: #1E1E1E;
  color: white;
  padding: 10px 10px;
  border-radius: 0;
  list-style: none;
  position: relative;
  display: inline-table;
  border-width: 0;
  border: none;
}
nav ul:after {
  content: "";
  clear: both;
  display: block;
}
nav ul li {
  float: left;
  border: none;
  border-width: 0;
}
nav ul li:hover {
  background: #1E1E1E;
  background-color: orange;
  color: white;
}
nav ul li:hover a {
  color: #fff;
}
nav ul li a {
  display: block;
  height: 25px;
  padding: 10px 10px;
  color: #757575;
  text-decoration: none;
  border: none;
  border-width: 0;
}
nav ul ul {
  background: #1E1E1E;
  color: white;
  border-radius: 0px;
  padding: 10px 10px;
  position: absolute;
  top: 50px;
  border-width: 0;
  margin-bottom: 0;
}
nav ul ul li {
  float: none;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
}
nav ul ul li a {
  padding: 10px 10px;
  color: #fff;
  height: auto;
}
nav ul ul li a:hover {
  background: #4b545f;
  background-color: orange;
}
nav ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}
nav li#english a {
  background: url(images/english.jpg) no-repeat;
  background-position: center center;
}
nav li#english a:hover {
  background: url(images/english.jpg) no-repeat;
  background-position: center center;
  background-color: orange;
}
nav li#english a.current {
  background: url(images/english.jpg) no-repeat;
  background-position: center center;
  cursor: default;
}
/*--------------------------------------------*/

#menu {
  background-color: #1E1E1E;
  text-align: center;
  padding-bottom: 0px;
}
body {
  margin: 0px;
}
.clearfloat {
  clear: both;
  margin: 0;
  padding: 0;
}
/*--------------------------------------------*/

#bottom {
  float: left;
  width: 100%;
  background: #1E1E1E;
  /*display: table; */
  margin: 0;
  text-align: center;
  min-height: 25px;
  height: 25px;
  border-width: 0px;
  margin-top: 0px;
  padding-top: 0px;
  bottom: 0px;
  position: fixed;
}
#bottom ul ul {
  display: none;
}
#bottom ul li:hover > ul {
  display: block;
}
#bottom ul {
  background: #1E1E1E;
  color: white;
  padding: 0 0;
  border-radius: 0;
  list-style: none;
  position: relative;
  display: inline-table;
}
#bottom ul:after {
  content: "";
  clear: both;
  display: block;
}
#bottom ul li {
  float: left;
}
#bottom ul li:hover:nth-child(1) {
  background: #1E1E1E;
  color: #757575;
  text-decoration: none;
}
#bottom ul li:hover:nth-child(2) {
  background: #1E1E1E;
  color: #757575;
  text-decoration: none;
}
#bottom ul li:hover {
  background: #1E1E1E;
  color: white;
  text-decoration: underline;
}
#bottom ul li:hover a {
  color: #fff;
}
#bottom ul li a {
  display: block;
  padding: 25px 40px;
  color: #757575;
  text-decoration: none;
}
#bottom ul ul {
  background: #1E1E1E;
  color: white;
  border-radius: 0px;
  padding: 0;
  position: absolute;
  top: 100%;
  width: auto;
}
#bottom ul ul li {
  float: none;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
}
#bottom ul ul li a {
  padding: 15px 40px;
  color: #fff;
}
#bottom ul ul li a:hover {
  background: #4b545f;
}
#bottom ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}
/*--------------------------------------------*/

.bottommenuitem {
  vertical-align: middle;
  padding: 25px 40px;
  color: #757575;
}
<!DOCTYPE html5>
<html>

<head>
  <title>Firma A/S</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="cssMenu.css">
</head>

<body>
  <nav id="top-menu">
    <p id="menu" style="margin-bottom: -25">
      <a href="Index.html">
        <img src="Tilbage.jpg" alt="Tilbage" width="243" height="243" />
      </a>
      <img src="Top_10.jpg" alt="" width="739" height="243" />
    </p>
    <nav id="top">
      <ul>
        <li><a href="index.php">Velkommen</a>
        </li>
        <li><a href="index.php">Firma A/S</a>
          <ul>
            <li><a href="index.php">Koncern oversigt</a>
              <ul>
                <li><a href="index.php">Ejendomsselskaber</a>
                </li>
                <li><a href="index.php">Investeringsselskaber</a>
                </li>
                <li><a href="index.php">Øvrige selskaber</a>
                </li>
                <li><a href="index.php">Lukkede eller solgte selskaber</a>
                </li>
              </ul>
            </li>
            <li><a href="index.php">Jubilæum</a>
            </li>
            <li><a href="index.php">Årsrapport</a>
            </li>
            <li><a href="index.php">Galleri</a>
            </li>
            <li><a href="index.php">Kontaktoplysninger</a>
            </li>
          </ul>
        </li>
        <li><a href="index.php">Privat</a>
        </li>
        <li><a href="index.php">Køb og salg</a>
        </li>
        <li><a id="english" href="index.php">In English</a>
        </li>
      </ul>
      <!-- PHP was here -->
    </nav>
  </nav>
  <div style="margin-top: 410; margin-bottom: 115">
    <!-- More PHP was here -->
  </div>
  <nav id="bottom">
    <ul>
      <li class="bottommenuitem">Firma A/S</li>
      <li class="bottommenuitem">phone No</li>
      <li><a href="mailto:[email protected]">[email protected]</a>
      </li>
    </ul>
  </nav>
</body>

</html>

如有任何帮助，我们将不胜感激，谢谢。

html css nav
3个回答
0
投票

请尝试这个：

nav ul {
    background: #1e1e1e none repeat scroll 0 0;
    border: medium none;
    border-radius: 0;
    color: white;
    display: inline-table;
    list-style: outside none none;
    margin: 0;
    padding: 10px;
    position: relative;
}
0
投票

nav {
  float: left;
  width: 100%;
  background: #1E1E1E;
  display: table;
  margin: 0;
  text-align: center;
  height: 25px;
  border: none;
  border-width: 0;
  margin: 0;
  padding: 10px 10px;
}
nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: block;
  border: none;
  border-width: 0;
}
nav ul {
  background: #1E1E1E;
  color: white;
  padding: 10px 10px;
  border-radius: 0;
  list-style: none;
  position: relative;
  display: inline-table;
  border-width: 0;
  border: none;
}
nav ul:after {
  content: "";
  clear: both;
  display: block;
}
nav ul li {
  float: left;
  border: none;
  border-width: 0;
}
nav ul li:hover {
  background: #1E1E1E;
  background-color: orange;
  color: white;
}
nav ul li:hover a {
  color: #fff;
}
nav ul li a {
  display: block;
  height: 25px;
  padding: 10px 10px;
  color: #757575;
  text-decoration: none;
  border: none;
  border-width: 0;
}
nav ul ul {
  background: #1E1E1E;
  color: white;
  border-radius: 0px;
  padding: 10px 10px;
  position: absolute;
  top: 50px;
  border-width: 0;
  margin-bottom: 0;
}
nav ul ul li {
  float: none;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
}
nav ul ul li a {
  padding: 10px 10px;
  color: #fff;
  height: auto;
}
nav ul ul li a:hover {
  background: #4b545f;
  background-color: orange;
}
nav ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}
nav li#english a {
  background: url(images/english.jpg) no-repeat;
  background-position: center center;
}
nav li#english a:hover {
  background: url(images/english.jpg) no-repeat;
  background-position: center center;
  background-color: orange;
}
nav li#english a.current {
  background: url(images/english.jpg) no-repeat;
  background-position: center center;
  cursor: default;
}
<nav id="top-menu">
  <p id="menu" style="margin-bottom: -25">
    <a href="Index.html">
      <img src="Tilbage.jpg" alt="Tilbage" width="243" height="243" />
    </a>
    <img src="Top_10.jpg" alt="" width="739" height="243" />
  </p>
  <nav id="top">
    <ul>
      <li><a href="index.php">Velkommen</a>
      </li>
      <li><a href="index.php">Firma A/S</a>
        <ul>
          <li><a href="index.php">Koncern oversigt</a>
            <ul>
              <li><a href="index.php">Ejendomsselskaber</a>
              </li>
              <li><a href="index.php">Investeringsselskaber</a>
              </li>
              <li><a href="index.php">Øvrige selskaber</a>
              </li>
              <li><a href="index.php">Lukkede eller solgte selskaber</a>
              </li>
            </ul>
          </li>
          <li><a href="index.php">Jubilæum</a>
          </li>
          <li><a href="index.php">Årsrapport</a>
          </li>
          <li><a href="index.php">Galleri</a>
          </li>
          <li><a href="index.php">Kontaktoplysninger</a>
          </li>
        </ul>
      </li>
      <li><a href="index.php">Privat</a>
      </li>
      <li><a href="index.php">Køb og salg</a>
      </li>
      <li><a id="english" href="index.php">In English</a>
      </li>
    </ul>

  </nav>
</nav>

0
投票

如果您正在谈论固定导航 id=top-menu，只需为 id 选择器的 CSS 添加高度即可。这个对我有用。如果您在覆盖它时遇到问题，请确保将其放置在 CSS 文件中的较低位置或添加 

!important
规则之后。

#top-menu {
    height: 6px;
}

#top-menu {
    height: 6px !important;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.