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 联系我们: