css列表内联不是水平列出项目吗?

[英]css list inline is not listing items horizontally?


I don't know why this is not displayed right, the list is meant to display horizontally? Instead it is displaying vertically!

我不知道为什么显示不正确,列表是水平显示的?而是垂直显示!

this is my code:

这是我的代码:

#stats li {
  display: inline;
  list-style-type: none;
  padding-right: 20px;
}
<ul id="stats">
  <li>
    <h1>53</h1>
    </a>
  </li>
  <li>
    <h1>67</h1>
    </a>
  </li>
</ul>

5 个解决方案

#1


18  

You forgot to add float: left property to your CSS:

您忘记在CSS中添加float: left属性:


#stats li
{
  display: inline;
  list-style-type: none;
  padding-right: 20px;
  float: left;
}

By the way, you are missing opening a tag in your HTML example. Should be

顺便说一下,您在HTML示例中没有打开标记。应该是


<li><a href="#"><h1>53</h1></a></li>

#2


28  

That's because the h1 element is block-level element by default.

这是因为h1元素默认是块级元素。

Add:

添加:

h1 {display: inline; }

to your css and they work as you want.

到你的css,它们可以按你的意愿工作。

On a separate note, it's worth noting that there should be only one h1 per page, all other headings, semantically, are below that heading and are sub-headings, of a sort. Think of it as a book, the book-title would be the h1, the chapters the h2 and so on.

另一方面,值得注意的是,每一页应该只有一个h1,所有其他的标题,从语义上来说,都在那个标题之下,是一种副标题。把它想象成一本书,书名是h1,章节是h2等等。

I'd suggest, then, changing your html a little:

那么,我建议你稍微改变一下你的html:

<ul id="stats">
    <li><a href="#"><span class="listHeader">53</span></a></li>
    <li><a href="#"><span class="listHeader">67</span></a></li>
</ul>

But that might, possibly, be just me =)

但那可能只是我一个人而已=)

Here's an article to support my point of view:

这里有一篇文章支持我的观点:

#3


4  

h1 tags default as display:block; so that is taking precedence.

h1标签默认为显示:块;这是优先考虑的。


Also, you have </a> tags after closing the <h1> tags, but there are no opening tags. That could cause issues in older browsers.

此外,在关闭

标记之后,您还有标记,但是没有打开标记。这可能会导致老版本浏览器的问题。


Third, what's the purpose of putting h1 tags inside of lis? Semantically, that doesn't make sense.

第三,在lis中放入h1标签的目的是什么?从语义上讲,这是没有意义的。

#4


2  

There are multiple solutions: you could change li to display: inline-block; or h1 to display:inline; (keep in mind to use only one h1 per site and to use it semantically correct! If you just want to style a word or a sentence which isn't really a h2 or 3 then use span's, em's or strong's.

有多种解决方案:可以将li改为display: inline-block;或h1显示:内联;(记住,每个站点只使用一个h1,并且在语义上使用它是正确的!)如果你只是想要一个单词或一个句子,它不是真正的h2或3,那么使用span, em或strong。

Also it's important that an inline-a-Tag can't enclose a block-whatever-Tag that is if you're not developing for HTML5 where you can enclose just anything in an a-Tag.

同样重要的是,inline-a-Tag不能包含块-whatever- tag,如果您不是为HTML5开发的,那么可以在a- tag中包含任何内容。

Also if you can, omit floating for a thing that can be achieved with more backwards compatibilty

如果可以的话,可以省略浮点运算,因为它可以用更向后的兼容性实现

#5


0  

Using display: inline-block as sternAndy suggests is probably the right solution here. Inline isn't really useful for anything but elements that have no nested elements inside them.

使用display: inline-block as sternAndy建议可能是正确的解决方案。Inline对于任何东西都不是真正有用的,除了那些内部没有嵌套元素的元素。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2010/09/24/32111d4fbee5ac5c74b303e14dc12a28.html



 
  © 2014-2022 ITdaan.com 联系我们: