0

我有同样的问题，这个人在这里问过：如何使 <a> 标签的大小与其父 <li> 标签的大小相同，以获得更大的可点击区域？

但是我希望这些 LI 项目像一个内联菜单，所以我不希望它们在彼此下方列出。怎么活？

4

6 回答 6

3

有许多不同的选项，这里有一个很容易定制的选项：http: //jsfiddle.net/panchroma/WuhVp/
HTML

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
<li><a href="#">five</a></li>
</ul> 
</div>

CSS 

#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: olive;
color: White;
float: left;
width: 100%;
font-family:sans-serif;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: olive;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
于 2013-03-25T16:49:06.320 回答
1

最简单的标记可能是这样的：

  • -元素浮动，li因此水平排列
  • a-tags 必须display: block;占用他们在父母内部的空间
  • 必须清除ul其overflow: hidden;孩子们的漂浮物

演示

先试后买

HTML

<ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
</ul>

CSS

ul {
    overflow: hidden;
    list-style: none;
}

ul > li {
    float: left;
}

ul > li > a {
    display: block;
}
于 2013-03-25T16:56:11.073 回答
1

试试 li a{ height:100%; width:100%} 这个强制“li”元素下的“a”元素具有其父元素的宽度和高度

于 2013-03-25T16:40:05.707 回答
1

放

float:left; to the  class controlling li

这会帮助你。如果你想让 li 像 li 一样可点击，请将 anchor < a> 的属性设置为

display:block;
height:value as you like px;
Width:value as you like px;
于 2013-03-25T17:03:01.863 回答
0

诀窍很简单。保持大于。padding_<a><li>

li { padding: 0; }
a { padding: 1.1em; }
于 2013-03-25T16:47:57.153 回答
0

这是一个相当简单的方法：

ul {
    list-style-type: none;
}

li {
    float: left;
}

a {
    display: block;
}

然后，您可以相应地添加任何高度、宽度、行高和填充。

这是一个例子：http: //jsfiddle.net/BBcEr/2/

于 2013-03-25T16:56:40.247 回答