html - 使用“text-align:justify”的css属性使listitems中的边框重叠，以使我的网站具有响应性

我试图使用text-align：justify的css属性使我的网站响应。本文对此进行了详细说明。
http://www.barrelny.com/blog/text-align-justify-and-rwd/

我有一个小问题。即使调整了浏览器的大小，我也需要使周围的边界与列表项重叠。如果可能的话，请帮忙。

http://jsfiddle.net/aAkAK/

HTML：

<div id="menu_wrap">
     <ul>
        <li><a href="index3.php">HOME</a></li>
        <li><a href="about.php">ABOUT US</a></li>
        <li><a href="safety.php">SAFETY</a></li>
        <li><a href="careers.php">CAREERS</a></li>
        <li><a href="contact.php">CONTACT US</a></li>
        <li class="break"></li>
     </ul>
</div> <!-- end of menu_wrap -->

CSS：

#menu_wrap{
    background: #a0a0a0;
}

#menu_wrap ul {
    text-align: justify;
}

.break {
    width: 100%;
    height: 0px;
}

#menu_wrap ul li {
    display: inline;
    border-left: 2px solid #a60000;
    border-right: 2px solid #a60000;
}

#menu_wrap ul li a {
    padding:0 1em;
}

最佳答案

也许您可以这样做呢？

#menu_wrap{
    background:#a0a0a0;
}
#menu_wrap ul li{
    display:inline;
    text-align:justify;
    border-right:2px solid #a60000;
}
#menu_wrap ul li:first-child{
    border-left:2px solid #a60000;
}

看看您的jsfiddle here的更新版本

关于html - 使用“text-align:justify”的css属性使listitems中的边框重叠，以使我的网站具有响应性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17464938/