宽度的内联元素 [英] Inline Elements With Width

问题描述

我有这个导航栏（它使用jQuery在标签页之间切换）。这个问题似乎在互联网上被频繁地询问，但我仍然找不到解决方案。 ）。我在这些上显示一个背景图片，并使它们更明确我需要使它们更宽更高。

 < div id =tabs> 
< ul id =tabs-nav-cont> 
< li class =tabs-navs>< a href =＃tabs-1> Nav 1< / div>< / a>< / li> 
< li class =tabs-navs>< a href =＃tabs-2> Nav 2< / div>< / a>< / li& 
< li class =tabs-navs>< a href =＃tabs-3> Nav 3< / div>< / a>< / li& 
< li class =tabs-navs>< a href =＃tabs-4> Nav 4< / a>< / li> 
< / ul> 
< / div> 
  

我可以这样做的唯一方法是将它们还原回块元素。这不是我想要的，因为他们垂直显示。所以我试图把divs在锚点，所以我可以把它们。然而，他们似乎也改变了他们回到块元素。

我困惑。有人请帮忙：）

解决方案

幸运的是，你住在2009年，inline-block被广泛采用的浏览器：跨浏览器内联拦截。

如果它只是为了高度（和 li 的所有内容适合每一行）喜欢用 line-height：123px ，它将内联框的高度设置为123px（每行，即）。

或者，很常见的，如果导航是左对齐，浮动：

  #nav li { 
 display：block; 
 float：left; 
} 
  

干杯，

This question seems to be asked freqeuently over the internet but I still can't find a solution.

I have this navigation bar (It switches between tabs using jQuery) which displays inline. I'm showing a background image on these and to make them more definitive I need to make them wider and higher.

<div id="tabs">
<ul id="tabs-nav-cont">
    <li class="tabs-navs"><a href="#tabs-1">Nav 1</div></a></li>
    <li class="tabs-navs"><a href="#tabs-2">Nav 2</div></a></li>
    <li class="tabs-navs"><a href="#tabs-3">Nav 3</div></a></li>
    <li class="tabs-navs"><a href="#tabs-4">Nav 4</a></li>
</ul>
</div>

The only way I can seem to do this is by reverting them back to block elements. Which is not what I want because they display vertically. So I tried putting divs in the anchors so I can size them up. However they seem to change them back to block elements too.

Im confused. Someone please help :)

解决方案

Luckily you live in the year 2009, where inline-block is widely adopted through browsers: Cross browser inline-block.

If it's just for the height (and all the content of the lis fits each on one line), you'd like to go with line-height: 123px, which sets the height of an inline box to 123px (per line, that is).

Or, quite common, if the navigation is left-aligned, float them:

#nav li {
  display: block;
  float: left;
}

Cheers,

这篇关于宽度的内联元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！