Как я могу исправить вертикальное выравнивание моего горизонтального меню? - PullRequest
Новая
       32

Как я могу исправить вертикальное выравнивание моего горизонтального меню?

0 голосов
/ 25 августа 2011

У меня проблема с вертикальным выравниванием; оно выравнивается по верху, когда я хочу, чтобы оно было внизу:

Мой HTML код: 

<div id="hor_menu">
<img src="header.jpg" border="0" style="float:left" width="200px" height="80px"/>
  <ul>
    <li><a href="http://www.alistapart.com/d/slidingdoors/v1/v1.html#">Home</a></li>
    <li class="current"><a href="http://www.alistapart.com/d/slidingdoors/v1/v1.html#">News</a></li>
    <li><a href="http://www.alistapart.com/d/slidingdoors/v1/v1.html#">Products</a></li>
    <li><a href="http://www.alistapart.com/d/slidingdoors/v1/v1.html#">About</a></li>
    <li><a href="http://www.alistapart.com/d/slidingdoors/v1/v1.html#">Contact</a></li>
  </ul>
</div>

Мой CSS код: 

body {
  margin:0;
  padding:0;
  }
#hor_menu *{
  margin:0;padding:0
  }
#hor_menu {
  float:left;
  width:100%;
  background: #000 url('bg.jpg') repeat-x bottom;
  font-family:Arial;
  font-size:15px;
  }
#hor_menu ul {
  list-style:none;
  }  
#hor_menu li {
  float:left;
  }  
#hor_menu a {
  display:block;
  padding:5px 13px;
  text-decoration:none;
  color:#fff;
  }
#hor_menu a:hover {
  background: #000 url('bg_hover.jpg') repeat-x bottom;
  }
#hor_menu .current a{
    border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -khtml-border-top-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -khtml-border-top-right-radius: 5px;
    -webkit-border-top-right-radius: 5px;
  background: #fff url('bg_current.jpg') repeat-x top;
  color:#000;
  }

ПРИМЕЧАНИЕ: приведенный выше код НЕ имеет попыток выравнивания по нижней части.

1 Ответ

2 голосов
/ 25 августа 2011

Один из способов исправить это - использовать display:inline-block; vertical-align:bottom. 

#hor_menu ul, #hor_menu img {
    vertical-align: bottom;
    display: inline-block;
    /* if you need ie6/7 support */
    *display: inline;
    zoom: 1
}

См .: http://jsfiddle.net/thirtydot/XYrWZ/3/

...