Question

ul#menu {
  background-image:url(../images/menu.png);
  width:992px;
  height:62px;
  margin:0 auto;
  background-repeat: no-repeat;
  overflow:hidden;
  clear:both;
}

ul#menu li {
  background-image:url(../images/sep.png);
  background-position: top right;
  background-repeat: no-repeat;
  width:112px;
  height:52px;
  margin-right:20px;    
  display: block;
  float:left;   
}

ul#menu li a {
  width:109px;
  height:52px;
  padding:0;
  margin:0;
  padding-top:14px;
  font-size: 1.6em;
  text-decoration: none;
  display: block;
  text-align: center;
  outline: 0;
  float:left;
  color: #272727;
}

之类似<li><a href="#about" class="menuitem">Lorem Ispus Dolor</a></li> 问题是＆＃34; Lorem Ispus Dolor＆＃34;不会水平但垂直延伸

Answer 1

ul#menu li a {
  width:109px;

对于具有该字体大小的整个文本来说，这太窄了，所以文本换行到新行。

这是宽度为300px的示例; http://jsfiddle.net/ncdkm/

css菜单定位

1 个答案: