CSS <nav>排序为2列。没有<ul>或<ol>

时间:2017-12-02 17:55:24

标签: html css nav

HTML看起来像这样,但我不允许对其进行更改。我只能写CSS把它变成2列。

<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>

到目前为止,我的CSS看起来像这样:

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;
}*

但是只有一列因某种原因超过了最大高度

2 个答案:

答案 0 :(得分:0)

<form action="" method="Post">

答案 1 :(得分:0)

这应该将<nav>分成两列

nav {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;    
    width: 300px;
}