css list inline geeft de items niet horizontaal weer?

Ik weet niet waarom dit niet goed wordt weergegeven, de lijst is bedoeld om horizontaal weer te geven?
In plaats daarvan wordt het verticaal weergegeven!

dit is mijn 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>

Antwoord 1, autoriteit 100%

Je bent vergeten de eigenschap float: lefttoe te voegen aan je CSS:


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

Trouwens, je mist het openen van atag in je HTML-voorbeeld. Zou moeten zijn


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

Antwoord 2, autoriteit 92%

Dat komt omdat het element h1standaard een element op blokniveau is.

Toevoegen:

h1 {display: inline; }

naar je css en ze werken zoals je wilt.

Op een aparte opmerking is het vermeldenswaard dat er slechts één h1per pagina mag zijn, alle andere koppen, semantisch, staan onder die kop en zijn een soort subkoppen. Zie het als een boek, de boektitel zou de h1zijn, de hoofdstukken de h2enzovoort.

Ik stel voor om je html een beetje aan te passen:

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

Maar misschien ligt dat aan mij =)

Hier is een artikel om mijn standpunt te ondersteunen:


Antwoord 3, autoriteit 20%

h1-tags standaard als display:block;dus dat heeft voorrang.


U hebt ook </a>-tags na het sluiten van de <h1>-tags, maar er zijn geen openingstags. Dat kan problemen veroorzaken in oudere browsers.


Ten derde, wat is het doel van het plaatsen van h1-tags in lis? Semantisch is dat niet logisch.


Antwoord 4, autoriteit 10%

Er zijn meerdere oplossingen:
je zou li kunnen veranderen om weer te geven: inline-block;
of h1 om weer te geven: inline; (Houd er rekening mee dat je slechts één h1 per site hoeft te gebruiken en deze semantisch correct te gebruiken! Als je alleen een woord of een zin wilt opmaken die niet echt een h2 of 3 is, gebruik dan span’s, em’s of strong’s.

Het is ook belangrijk dat een inline-a-Tag geen block-whatever-Tag kan omsluiten als u niet voor HTML5 ontwikkelt, waar u alles in een a-Tag kunt plaatsen.

Ook als je kunt, laat het drijvend weg dat kan worden bereikt met meer achteruit compatibilty


Antwoord 5, Autoriteit 5%

Gebruik display: inline-blockZoals Sternandy suggereert, is waarschijnlijk de juiste oplossing hier. Inline is niet echt nuttig voor allesbehalve elementen die geen geneste elementen in hen hebben.

Other episodes