The HTML looks like this but i am not allowed to make changes to it. I can only write CSS to turn this into 2 columns.
<section>
<h2 id="povezave">Povezave</h2>
<nav>
<a href="http://www.behance.net/">www.behance.net</a>
<a href="http://www.kiberpipa.org/index.php">www.kiberpipa.org</a>
<a href="http://www.osalt.com/">www.osalt.com</a>
<a href="http://videolectures.net/">videolectures.net</a>
<a href="http://css3button.net/">css3button.net</a>
<a href="https://developer.mozilla.org/">developer.mozilla.org</a>
<a href="http://www.w3.org/">www.w3.org</a>
<a href="http://validator.w3.org/">validator.w3.org</a>
<a href="http://www.w3schools.com/">www.w3schools.com</a>
<a href="http://www.sitepoint.com/">www.sitepoint.com</a>
<a href="http://caniuse.com/#home">caniuse.com</a>
<a href="http://dribbble.com/">dribbble.com</a>
</nav>
So far my CSS looks like this:
nav{
position: relative;
margin:0 auto;
max-width:250px;
display:inline-table;
max-height: 100px;
}
*a{
clear:left;
display: inline;
float: left;
text-decoration:none;
}*
but that makes only one column which for some reason gets to exceed the max-height
* {
box-sizing: border-box;
margin: 0px;
}
nav a {
display: inline-block;
float: left;
text-decoration: none;
width: 50%;
}
This should split the <nav>
into two columns
nav {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
width: 300px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.