Issue
In the following I would like to configure the number of columns used to display my list. I noticed the first column is not aligned with the others. Is this normal? What I am missing?
Note that I cannot directly modify the style of ul. It has to be on an outside element.
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div style="-webkit-column-count: 4;-moz-column-count: 4; column-count: 4;">
<ul>
<li>Gods</li>
<li>Óðinn</li>
<li>Baldur</li>
<li>Njörður</li>
<li>Freyr</li>
<li>Týr</li>
<li>Bragi</li>
<li>Heimdal</li>
<li>Thor</li>
<li>Höðr</li>
<li>Víðar</li>
<li>Áli or Váli</li>
<li>Ullr</li>
<li>Forseti</li>
<li>Óðinn</li>
<li>Þór</li>
</ul>
</div>
</body>
</html>Solution
You must remove the default margin from the unordered list.
<ul style="margin: 0">
Default formatting exists in web browsers to make very basic pages more readable. However, it can cause a website to look inconsistent across different browsers. Problems like this are resolved by using a CSS reset stylesheet, such as the meyerweb reset stylesheet, to clear default values for everything.
Answered By - seedee
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.