HTML:

<div id="nav">
  <ul id="main-nav">
    <li> <a href="#">Home</a> </li>
    <li>
      <a href="#">Catagory</a>
      <ul class="sub-nav">
        <li> <a href="#">SubCat1</a> </li>
        <li>
          <a href="#">SubCat2</a>
          <ul>
            <li> <a href="#">SubCat2Sub</a> </li>
            <li> <a href="#">SubCatSsub</a> </li>
          </ul>
        </li>
      </ul>
    </li>
    <li> <a href="#">About</a> </li>
    <li> <a href="#">How to order</a> </li>
  </ul>
</div>

Как я могу центрировать div id="nav"? и как я могу сделать Subcat2 рядом с Subcat1?

См. JSFiddle для демонстрации.

0
craphunter 10 Май 2014 в 14:59

2 ответа

Лучший ответ

Используя следующий CSS (изменения комментируются)

#nav{
    font-size: 1px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
 }

 #nav ul{
    padding: 0;
    list-style: none;
 }

 #nav a{
    background: pink;
    color: yellow;
    font-family: sans-serif;
    text-decoration: none;
 }

 #nav a:hover{
    background: pink;
 }

 #main-nav{
 }

 #main-nav > li{
    float: left;
 }

 #main-nav > li > a{
    font-size: 18em;
    line-height: 2em;
 }

 .sub-nav > li{
    display: inline-block; /* brings elements beside each other */
    vertical-align: top; /* makes elements more towards top of their parent */
 }

 .sub-nav > li > a{
    font-size: 16em;
    line-height: 1.5em;
    background: blue;
 }

 .sub-nav ul{
    top: 0;
 }

 .sub-nav ul a{
    font-size: 14em;
    line-height: 1.5em;
    background: red;
 }

 #main-nav li:hover > ul{
    display: block;
    text-align: left;
 }

 .sub-nav, .sub-nav ul{
    display: none;
    position: absolute;
 }

 #main-nav li:hover > ul li ul{
    display: block;
    position: relative;
 }

 #main-nav{display: inline-block;} /*it makes parent's text-align: center; take effect on it*/
1
Ejaz 10 Май 2014 в 11:08

Если у вас есть родительский элемент для #nav (или вы можете использовать body), вы можете установить родительский элемент на text-align:center, а #nav на display:inline-block.

Демонстрация JSFiddle

CSS

body {
    text-align: center;
}

#nav {
    font-size: 1px;
    text-align:center; 
    margin-left:auto; 
    margin-right:auto; 
    display: inline-block;

}
0
Paulie_D 10 Май 2014 в 12:18