html - 不能居中导航栏，必须点击这个词本身-6ren

html - 不能居中导航栏，必须点击这个词本身

转载作者：行者123 更新时间：2023-11-28 00:37:00

25

4

这是我的 css 代码(用于索引页):

span{
display:block;
font-size:100px;
font-weight: lighter;
font-family: "Times New Roman", Times, serif;
}

.index {
    background-image: url("images/indexbackground.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
  background-size: 1600px 800px;
}

/*NAVBAR (begin)*/
a {
  text-decoration: none;
}

nav {
    font-family: Arial;
    background-color: Black;
}

ul {
  background: black;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

li {
    color: #white;
  background: black;
    display: block;
    float: left;
    padding: 27px;
    position: relative;
    text-decoration: none;
  transition-duration: 0.5s;
}

li a {
  color: #fff;
}

li:hover {
    background: #DEB887;
    cursor: pointer;
}

ul li ul {
    background: black;
    visibility: hidden;
  opacity: 0;
  min-width: 17rem;
    position: absolute;
  transition: all 0.5s ease;
  margin-top: 27px;
    left: 0;
  display: none;
}

ul li:hover > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
    clear: both;
  width: 100%;
}
/*NAVBAR (end)*/

这是 HTML(索引页)的代码:

<!DOCTYPE html>
<link rel="stylesheet" href="piano.css" />
<html class="index">
<head>
<title>The piano - Home</title>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br>
<center><span>The Piano</span></center>

<!--(start) NAVBAR-->
<br><br><br><br><br><br>
<nav>
<div class="navwrapperindex">
<nav class="navmenuindex">
<ul class="clearfixindex">
<li><a href="index.html">Home</a></li>
<li><a>The piano itself</a>
<ul class="sub-menu">
<li><a href="mechanics.html">Mechanics</a></li>
<li><a href="construction.html">Construction</a></li>
</ul>
<li><a>Types of pianos</a>
<ul class="sub-menu">
<li><a href="grand.html">Grand</a></li>
<li><a href="upright.html">Upright</a></li>
<li><a href="electric.html">Electric</a></li>
</ul>
</li>
<li><a href="historypianos.html">History of the piano</a>
</li>
<li><a href="pianosongs.html">Piano songs</a>
</li>
</div>
</nav>
<!--(end)NAVBAR-->

</body>
</html>

我已经尝试了很多东西，但似乎没有任何效果......现在我的索引页面看起来像这样:

(Index page but I had to cut it because the full picture was over 2 mb)

(对不起，这真的很糟糕，但这是我第一次用 html 和 css 制作网站)。

我需要将导航栏居中并能够单击框而不是单词。感谢您阅读(也许还有回答)!

最佳答案

首先，我建议使用类而不是直接元素选择器，如果你想让导航居中，你只需要在主导航的父div中设置属性align-text: center。如果您想单击所有框而不是仅单击文本，则需要填充和边距的元素是 a 而不是 li。

检查片段:

span{
display:block;
font-size:100px;
font-weight: lighter;
font-family: "Times New Roman", Times, serif;
}

.index {
    background-image: url("images/indexbackground.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
  background-size: 1600px 800px;
}

.navwrapperindex {
  text-align: center;
}
.navwrapperindex > nav{
  display: inline-block;
}


a {
  text-decoration: none;
}

nav {
    font-family: Arial;
}

ul {
  background: black;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

li {
    color: #white;
  background: black;    
    float: left;    
    position: relative;
    text-decoration: none;
  transition-duration: 0.5s;
}

li a {
  color: #fff;
  padding: 27px;
  display: block;
}

li:hover {
    background: #DEB887;
    cursor: pointer;
}

ul li ul {
    background: black;
    visibility: hidden;
  opacity: 0;
  min-width: 17rem;
    position: absolute;
  transition: all 0.5s ease;
    left: 0;
  display: none;
}

ul li:hover > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
    clear: both;
  width: 100%;
}

<center><span>The Piano</span></center>

<!--(start) NAVBAR-->
<br><br><br><br><br><br>
<nav>
  <div class="navwrapperindex">
    <nav class="navmenuindex">
      <ul class="clearfixindex">
        <li><a href="index.html">Home</a></li>
        <li><a>The piano itself</a>
          <ul class="sub-menu">
            <li><a href="mechanics.html">Mechanics</a></li>
            <li><a href="construction.html">Construction</a></li>
          </ul>
          <li><a>Types of pianos</a>
            <ul class="sub-menu">
              <li><a href="grand.html">Grand</a></li>
              <li><a href="upright.html">Upright</a></li>
              <li><a href="electric.html">Electric</a></li>
            </ul>
          </li>
          <li><a href="historypianos.html">History of the piano</a>
        </li>
        <li><a href="pianosongs.html">Piano songs</a>
        </li>
      </ul>
    </nav>
  </div>
</nav>

关于html - 不能居中导航栏，必须点击这个词本身，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54099935/

25

4

0

文章推荐： html - Bootstrap 4 输入调整大小行为

文章推荐： html - 在透明图像上显示内容

文章推荐： html - flexbox 元素内的固定元素

javascript - 如何使用正则表达式突出显示字符串中的多个关键字/词？
我有以下案例要解决。在短语中突出显示关键字的 Javascript 方法。 vm.highlightKeywords = (phrase, keywords) => { keywords =
regex - 在Dart正则表达式中匹配$(美元符号)词
我要匹配文本中的所有美元符号单词。例如，"Hello $VARONE this is $VARTWO"可以匹配$VARONE和$VARTWO。正则表达式应该是/\$(\w+)/g，但是当我在Dart
javascript - 改变状态的函数的 Redux 词
在 redux 中，对于将状态作为参数、更改状态并返回新状态的特定操作，您会在 switch 语句中调用什么函数？ function reducer(state = DEFAULT_STATE, ac
mysql - 未记录的 MySQL 词
在 MySQL 5.1 中，我将一个字段命名为“Starting”。但是，每次我使用 SQL 查询时，它都会说无效的 SQL 语法。经过一些谷歌搜索，我发现 STARTING 是一个保留的 SQL 词
python - 从列表中找到 secret 词？
我必须使用函数 isIn(secretWord,lettersGuessed) 从列表中找到密码。在下面发布我的代码。 def isWordGuessed(secretWord, lettersGue
c - C语言求两个字符串中最长的公共(public)词？
一段时间以来，我一直无法找到两个字符串中最长的常用词。首先我想到了用“isspace”函数来做这件事，但不知道如何找到一个常用词。然后我想到了“strcmp”，但到目前为止我只能比较两个字符串。我在想
python - 设置长度的python中的契约(Contract)词
我目前正在尝试制作一种“单词混合器”:对于两个给定的单词和指定的所需长度，程序应返回这两个单词的“混合”。然而，它可以是任何类型的混合:它可以是第一个单词的前半部分与第二个单词的后半部分相结合，它可以
javascript - 匹配 "After"如果它后面没有一个 -ing 词
如果 After 之后(逗号之前)没有 -ing 词，我想匹配它。所以 After 和逗号之间不应该有 -ing 词。所需的匹配项(粗体): After sitting down, he began
java - StanfordNLP 词形还原无法处理 -ing 词
我一直在试验 Stanford NLP 工具包及其词形还原功能。我很惊讶它如何使一些词词形还原。例如: depressing -> depressing depressed -> depressed
javascript - 词云中缺少 d3.js 词
js 并尝试根据 [这里] 中的示例代码来做词云:https://github.com/jasondavies/d3-cloud .我想做的是单词的字体大小是基于数组中单词的频率。例如我有 [a,a,
python - Conceptnet Numberbatch(多语言)OOV 词
我正在处理一个文本分类问题(在法语语料库上)，并且正在试验不同的词嵌入。我对 ConceptNet 提供的内容非常感兴趣，所以我决定试一试。我无法为我的特定任务找到专门的教程，所以我听取了他们的建议
search - 在 emacs 中编辑 I-search 词？
当我在文本中搜索时，我输入 C-s，然后输入单词，然后一次又一次地输入 C-s，光标前进到找到的单词的下一个位置。问题是，一旦我转到下一个单词，我无法在按钮处编辑迷你缓冲区中的搜索单词，如果我按 Ba
java - 如何在我的文件夹结构中的 Maven 中运行一个简单的 hello 词？
我正在尝试按照以下结构运行这个 maven Hello Word: ├── pom.xml └── src └── Main.java 使用pom.xml设置: 4.0.0
python - 从图像中删除 OCR 词(OpenCV，Python)
所以，从我可以开始的.. 我正在使用 OCR。该脚本非常适合我的需要。它检测单词的准确性对我来说还可以。这是结果:附加图像 100% 准确。 from PIL import Image import
ms-word - 词: Picture hidden behind text
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。想要改善这个问题吗？更新问题，以便将其作为on-topi
java - Comparable 接口(interface)前无接口(interface)词
这是细节，但我想知道为什么会这样。示例代码: Class klasa = Enum.class; for(Type t : klasa.getGenericInterfaces()) Syst
javascript - 如何使用 JavaScript 创建 .docx 文件而不是 .doc 词
我在用: var header = ""+ "Export HTML to Word Document with JavaScript"; var footer = ""; /
bash - 在变量的字符串中找到一种模式后输出值/词(grep、awk、sed、pearl 等)
我有一个程序可以像这样将数据打印到控制台(以空格分隔): variable1 value1 variable2 value2 variable3 value3 varialbe4 value4 编辑:
bash - 在变量的字符串中找到一种模式后输出值/词(grep、awk、sed、pearl 等)
我有一个程序可以像这样将数据打印到控制台(以空格分隔): variable1 value1 variable2 value2 variable3 value3 varialbe4 value4 编辑:
ruby-on-rails - "use"Ruby/Rails/Rack 代码中的关键字/词
最近我在查看与goliath相关的一些代码时，偶然在Ruby代码中看到了这个词use。 , 中间件等。看起来它不同于include/extend, and require. 有人可以解释为什么存在这个

首页

博学

6Ren·AI

商城

html - 不能居中导航栏，必须点击这个词本身