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

iq3niunx 于 2023-03-05 发布在其他

关注(0)|答案(3)|浏览(198)

我怎样才能减少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:xxxx@xxx.xx">xxx@xxx.xx</a>
      </li>
    </ul>
  </nav>
</body>

</html>

任何帮助都很感激，谢谢。

css

来源：https://stackoverflow.com/questions/36432633/how-to-set-height-of-nav-in-html-or-css

3条答案

按热度按时间

hwamh0ep1#

请尝试以下操作：

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）回复(0）举报 2023-03-05

utugiqy62#

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）回复(0）举报 2023-03-05

ujv3wf0j3#

如果你说的是固定的nav id=top-menu，只需要在CSS中为id选择器增加一个高度就可以了。这对我很有效。如果你对它的覆盖有问题，确保它在CSS文件中的位置更低，或者在规则后面添加!important。

#top-menu {
    height: 6px;
}

#top-menu {
    height: 6px !important;
}

赞(0）回复(0）举报 2023-03-05

我来回答

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

3条答案

相关问题

热门标签

最新问答