Question

对于你们中的许多人来说，这可能是一个非常简单的问题，但我似乎无法解决这个问题，而且我现在已经有一个小时了。

我正在尝试使用按钮创建导航栏。我希望按钮具有以下功能，但我无法弄清楚如何实现它们：

点击按钮上的任意位置将激活按钮重定向。
字体没有加下划线或重新着色，就像常规文字超链接一样。
字体更“胖”（我不知道如何形容它。

在图片中，我放了一个小红叉表示我希望能够点击这些位置以便它工作。

我已经在jsfiddle中加入了我能够实现的目标。

我的HTML

<ul>
    <li><a id="nav" href="#">Page1</a></li>
    <li><a id="nav" href="#">Page2</a></li>
    <li><a id="nav" href="#">Page3</a></li>
    <li><a id="nav" href="#">Page4</a></li>
</ul>

我的CSS：

body {
    margin: 0px
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul li {

    float:left;
    overflow: auto;
    padding: 6px 12px 6px 12px;
    background-color: grey;

    border: 1px solid #000;
    text-decoration: none;
    margin: 0;
    border: 0;
    margin-right: 3px;
    font-weight: bolder;
    color: yellow;
}

ul li:hover{
    background-color: black;   
}
}

Examples I'd like to copy.

Answer 1

将ul li {替换为ul li a{，将ul li:hover{替换为ul li a:hover{

http://jsfiddle.net/vxre4x2k/2/

Answer 2

只需将ul li替换为ul li a，将ul li:hover替换为ul li a:hover。

要使字体更粗或更薄，请更改font-weight

Answer 3

你需要让你的锚点像块元素一样工作。 LI将包含锚点。

ul li a {
    display: block;

    text-decoration: none;
    padding: 6px 12px 6px 12px;
}
ul li a:hover {
    background-color: black;
}

Answer 4

您可以display: inline-block使用a(anchor element)并为您的第一个请求提供一些padding（点击按钮上的任意位置将激活按钮重定向。）。您还可以使用text-decoration: none;删除下划线并减少＆＃34; fat＆＃34;来自font-weight: 100;的字体：

＆＃13;

body {
  margin: 0px
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul li {
  float: left;
  padding: 6px 12px 6px 12px;
  background-color: grey;
  border: 1px solid #000;
  text-decoration: none;
  margin: 0;
  border: 0;
  margin-right: 3px;
  font-weight: bolder;
  color: yellow;
}
ul li:hover {
  background-color: black;
}
ul li {
  padding: 0;
}
ul li a {
  display: inline-block;
  padding: 5px;
  text-decoration: none;
  color: white;
  font-weight: 100;
}

＆＃13;

<ul>
  <li><a id="nav" href="#">Page1</a>
  </li>
  <li><a id="nav" href="#">Page2</a>
  </li>
  <li><a id="nav" href="#">Page3</a>
  </li>
  <li><a id="nav" href="#">Page4</a>
  </li>
</ul>

＆＃13;

<强>参考文献：

font-weight

text-decoration

Answer 5

单击按钮上的任意位置将激活按钮重定向。

要执行此操作，请使用锚元素包装列表元素。离。

<a href='#'><li>foo</li></a>

字体没有下划线或像常规文本超链接一样重新着色。

对于你给他们的链接，每个链接都是＆＃34; nav＆＃34;。我们不建议将id设置为单个元素。我会查看CSS id＆class和class之间的区别。简而言之，类用于共享相同样式的多个元素。在这种情况下，您将使用一个类，因此它应该是：

<a class="nav" href="#"><li>Page1</li></a>

要删除下划线的类的样式为：

.nav{
  text-decoration:none;
  color: black;
}

字体更多＆＃34;胖＆＃34; （我不知道如何描述它。你是说你希望它变胖吗？如果是这样的话，试试这个：

<a class="nav" href="#"><strong><li>Page1</li></strong></a>

或者您也可以设置css样式font-weight属性

font-weight属性可用于增加或减少＆＃34; fattness＆＃34;的字体。如果那不能为你做，我建议使用不同的字体。

创建按钮，点击任意位置进行导航

5 个答案: