0

我试图使用 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;
}

在此处输入图像描述

4

3 回答 3

0 
        #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;
            margin-left:-8px;
    }

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

在你的 CSS 中试试这个——其中一个边框会以这种方式重叠。

于 2013-07-04T08:20:19.130 回答
0

当您使用内联块时，您需要记住您的块元素被视为文本中的单词......因此所有字体设置都适用。

您可以在此处了解更多信息 ：http: //joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/ 和此处： http://css- tricks.com/fighting-the-space-between-inline-block-elements/

在您的情况下，您可以在容器上将字体大小设置为 0px 并将其重新设置为列表项上可读的内容：

#menu_wrap{
    background: #a0a0a0;
}

#menu_wrap ul {
    text-align: justify;
    font-size: 0px;
}

.break {
    width: 100%;
    height: 0px;
    border: none !important;
}

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

#menu_wrap ul li:first-child {
    border-left: 2px solid #a60000;
}

#menu_wrap ul li a {
    padding:0 1em;
}
于 2013-11-22T10:04:54.513 回答
0

也许你可以这样做？

#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 更新版本

于 2013-07-04T09:04:21.767 回答