Question

我正在尝试使用html＆amp; amp;创建一个非常简单的“简单”选项卡。 CSS。为此，我有一堆li元素，在每个元素中都有一个“a href”元素。现在，当我看看IE＆amp;中的输出时Firefox（在设置样式以使列表水平显示正确的边框和所有内容之后），我可以看到“a”元素溢出了“li”元素。如何根据“a”元素调整“li”元素的大小？

CSS和html如下

#tabs ul
{
  list-style:none;
  padding: 0;
  margin: 0;
}

#tabs li
{
  display: inline;
  border: solid;
  border-width: 1px 1px 1px 1px;
  margin: 0 0.5em 0 0;
  background-color: #3C7FAF;
}

#tabs li a
{
  padding: 0 1em;
  text-decoration: none;
  color:White;
  font-family: Calibri;
  font-size: 18pt;
  height: 40px;
}

<div id="tabs">
  <ul>
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li><a href="#fragment-2"><span>Two</span></a></li>
    <li><a href="#fragment-3"><span>Three</span></a></li>
  </ul>
</div>

Answer 1

您还可以查看以下网站：

http://css.maxdesign.com.au/listamatic/
http://accessify.com/tools-and-wizards/developer-tools/list-o-matic/
http://www.hongkiat.com/blog/50-nice-clean-css-tab-based-navigation-scripts/

有时重新发明轮子很有趣，有时则不是：D

Answer 2

样式列表上的

This article from A List Apart可能有所帮助。

Answer 3

您忘记了CSS声明中的“＃”。您的html代码中有一个id =“tabs”，需要引用为

#tabs {
    ....
}

CSS中的

。剩下的就是微调;）

然后尝试

#tabs {
    display: inline-block;
}

而不是显示：inline;

Answer 4

尝试将li元素上的显示设置为“inline-block”。

http://www.quirksmode.org/css/display.html

Answer 5

将锚定为

 display:block

Answer 6

我给

display:block

到li和a标签。然后漂浮李。您可以添加此代码以使li完全包含a：

overflow: hidden; zoom: 1; word-wrap: break-word;

这将清除内部的任何内容。

Answer 7

你也可以简单地给你的一些填充：

#tabs li {
    padding: 8px 0 0;
}

Answer 8

内联块是一种很好的方法（如建议的那样）。但如果你想要这是跨浏览器，你需要添加som CSS-hacking“magic”：）

关于这个主题的一个非常好的教程是http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

使用该文章中的方法，您最终得到以下CSS：

/* cross browser inline-block hack for tabs */
/* adapted from:
/* http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */

#tabs ul, 
#tabs li, 
#tabs li a {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: bottom; 

    margin:0; padding:0; /* reset ul and li default settings */

}

/* The rest is "window dressing" (i.e. basically the tab styles from your CSS) */

#tabs li a {
    margin: 0 0.5em 0 0;
    background-color: #3C7FAF;
    padding: 0 1em;
    text-decoration: none;
    color:white;
    font-family: Calibri;
    font-size: 18pt;
    height: 40px;    
    }

Answer 9

display:inline-block和li上的a {{1}}为我做了伎俩。列表被拉伸以适应我对链接所做的任何事情。

“li”元素中的“a”元素溢出“li”元素

9 个答案: