html - 对齐导航菜单中的文本也 IOS/触摸友好

Question

我正在尝试将导航菜单中的起始文本移到更左侧，并使其余部分在间隙之间正确对齐，我还注意到这不适用于 iPhone 等触摸设备。我相信这可以通过 CSS 表实现，而无需使用 JavaScript。

任何帮助将不胜感激

非常感谢

http://jsfiddle.net/p6Bj5/

HTML

<div class="navbar">
  <ul id="nav">
  <li>
        <a href="index.php">Homepage</a>
    </li>
    <li><a heref="#">About Us</a>
        <ul>
            <li><a href="index.php?site=about">About</a></li>
                        <li><a href="index.php?site=static&staticID=4">Allies</a></li>
            <li><a href="index.php?site=static&staticID=1">Rank</a></li>
        </ul>
    </li>
    <li>
        <a href="index.php?site=members">Members</a>
    </li>
    <li>
        <a href="index.php?site=forum">Forums</a>
    </li>
    <li><a heref="#">Stats</a>
        <ul>
            <li><a href="index.php?site=static&staticID=2">In-Game Stats</a></li>
            <li><a href="index.php?site=static&staticID=3">Outfit Stats</a></li>
        </ul>
    </li>
    <li><a heref="#">Media</a>
        <ul>
            <li><a href="index.php?site=files">Downloads</a></li>
            <li><a href="index.php?site=gallery ">Gallery</a></li>
            <li><a href="index.php?site=videos">Videos</a></li>
            <li><a href="index.php?site=liveshow">Live Streams</a></li>
        </ul>
    </li>
    <li>
        <a href="index.php?site=forum">Events</a>
    </li>

</ul>
  </div>

CSS

@charset "utf-8";
body {
  font: 80%/1.4 Arial, Helvetica, sans-serif;
    background-color:#000;
    margin: 0;
    padding: 0;
}

.navbar {
    background-image:url(http://gbprojects.net/images/top_06.jpg);
    width: 937px;
    height: 48px;
    line-height: 48px;
    margin: 0 auto;
}
#nav{
    list-style:none;
    font-weight:normal;
    margin: 0px;
    line-height: 38px;
    /* Clear floats */
    float:left;
    width:100%;
    height: 38px;
    font-size: 18px;
    font-weight: bold;
    /* Bring the nav above everything else--uncomment if needed.
    position:relative;
    z-index:5;
    */
}
#nav li{
    float:left;
    margin-right:40px;
    position:relative;
}
#nav a{
    display:block;
    padding:10px;
    color:#fff;
    background: transparent;
    text-decoration:none;
    text-shadow: black 0.1em 0.1em 0.2em;
}
#nav a:hover{
    color:#000;
    text-decoration:none;
    text-shadow: none;
}

/*--- DROPDOWN ---*/
#nav ul{
    background: #02949d; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    list-style:none;
    position:absolute;
    margin-top: -10px;
    margin-left: -20px;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
    line-height: 20px;
    z-index: 100;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 7px;
    -moz-border-radius-bottomleft: 7px;
    -webkit-border-radius: 0px 0px 7px 7px;
     border-radius: 0px 0px 7px 7px; 
    -webkit-box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25);
    -moz-box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25);
     box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25);
}
#nav ul li{
    margin-left: -40px;
    margin-right: 50px;
    font-size: 12px;
    padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:none;
    z-index: 100;
}
#nav ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    z-index: 100;
}
#nav li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
    z-index: 100;
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    background: transparent;
    color: #000;
    text-decoration:none;
    z-index: 100;
    text-shadow: none;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
    z-index: 100;
    margin-left: 20px;
    text-shadow: none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background: transparent;
    color: #fff;
    z-index: 100;
    margin-left: 20px;
    text-shadow: none;
}

x;
    line-height: 58px;

Answer 1

您的问题是您正在为导航栏使用背景图像。因为单词的长度不同，您需要进入并单独更改每个链接的页边距。要么是那样，要么是为 ul 和 li 添加背景，这将是更可取的方法。