1

助けが必要です！私は何かに取り組んでいますが、それを機能させることができません。:) テキストを中央に揃えたい。ここに写真があります：http://imageshack.us/photo/my-images/266/sn54.jpg/

誰かヒントを教えてください。ありがとう。

私が使用するコードは次のとおりです。

HTML:

<div id="container">
    <div id="header">
            <ul class="nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Protfolio</a></li>
                <li><a href="#">About Me</a></li>
                <li><a href="#">Contact Me</a></li>
            </ul>
    </div><!-- header end -->
   </div><!-- container end -->

CSS:

#header{
position: relative;
margin: 60px 0 0 0;
width: 100%;
height: 80px;}

.nav{
background: url(../images/navbar.png) no-repeat 0 0;
width:100%;
height:80px;
text-align:center;
display:block;}

.nav li{
float:left;
list-style: none;
margin: 10px;}

.nav li a{
width:150px;
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: block;
text-decoration: none;
color: #f0f0f0;
font-size: 1.6em;
margin: 0 .5em;}

.nav li a:hover {
margin-top: 2px;
background-color: #d0d5d6;}
4

3 に答える 3

1

navこれを行う簡単な方法は、要素の左右にリボン セクションの幅と同じパディングを追加することです。

.nav {
    padding:0 XXpx; /* XXpx = width of the ribbon ends */
}


.nav li {
    width:25%;
    text-align:center;
    margin:0;
}

基本として、これで問題が解決するはずです。マージンなどに基づいて、ニーズに合わせて正確なコードをいじる必要がある場合があります。

または、このタイプのリボンを CSS だけで作成し、画像にまったく依存しない方法については、次のチュートリアルをご覧ください: http://css-tricks.com/snippets/css/ribbon/

于 2013-08-29T07:49:46.287 に答える
0

ul を div でラップし、この div には背景画像があります。ulを調整することができます。

于 2013-08-29T07:49:56.880 に答える
0

背景画像のサイズがわからないので特定するのは難しいですが、ナビゲーションではなくヘッダー要素に背景を配置してみてください。次に、nav UL の幅をリボン イメージの内側部分の幅に設定し、それにマージン 0 auto を設定して、水平方向の中央に配置します。

于 2013-08-29T07:49:08.470 に答える