简体   繁体   中英

CSS <nav> ordered into 2 columns. No <ul> or <ol>

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM