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 でこれを試してください - 境界線の 1 つがこの方法で重なります。

于 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-before-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 に答える