0

それで、次のコードを取得しました。

HTML

            <div id="container">
        <p class="title"> Social Media </p>
        <ul>
            <li><a href="#" class="twitter">Twitter</a></li>
            <li><a href="#" class="deviant">Deviantart</a></li>
            <li><a href="#" class="skype">Skype</a></li>
        </ul>
    </div>

CSS

    #container {
background-color: #FFF;
background-image: url(images/footer.jpg);
height: 250px;
margin-top: 40px;
border-top: 3px solid #C6C6C6;
border-bottom: 3px solid #C6C6C6;
}

p.title {
color: #FFF;
font-family: "Open Sans", Helvetica, sans-serif;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 24px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}


#container ul {
text-align: center;
word-spacing: 150px;
margin: 0;
padding: 0;
}

#container ul li {
display: inline;
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}

#container > ul > li > a {
text-decoration: none;
color: #FFF;
letter-spacing: 5px;
text-transform: uppercase;
line-height: 3;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);

}

問題は、3 つのリンク「TWITTER DEVIANTART SKYPE」が、「SOCIAL MEDIA」という上記のテキストと正確に一致しないことです。両方とも中央に配置されています。

理由はわかりませんが、上記のソーシャル メディア テキストとまったく同じように 3 つのリンクを中央に配置したいのですが、そうではありません。何か案は？

問題を示す JSFiddle を次に示します。

http://jsfiddle.net/cuLgC/

4

5 に答える 5

0

修正された更新されたフィドルは次のとおりです: JSFiddle

変更点は次のとおりです。

#container ul {
  /* text-align: center;  moved to li */
  /* word-spacing: 150px; removed, this was causing issue as some words are longer */
  width: 100%;
  display: table;        /* added  */
  table-layout: fixed;   /* added  */
  margin: 0;
  padding: 0;
}

#container ul li {
  display: table-cell;   /* added  */
  width: auto;           /* added  */
  text-align: center;    /* moved */
  /* display: inline; removed */
  font-family: "Open Sans", Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
}

このずれは、次word-spacing: 150px;のことが原因で発生していました。また、メニュー オプションの幅がすべて異なるという事実。同じ単語を 3 回使用した場合、それらは整列しますが、異なる長さの単語は幅に応じて広がります。

于 2013-10-17T11:22:35.983 に答える
0

最も良い方法ではありませんが、<br>2 つのリスト要素の後に配置すると、それらがドロップダウンされます。

http://jsfiddle.net/cuLgC/7/

于 2013-10-17T11:06:57.430 に答える
0

変化する

container ul li{
display: inline
}

に

container ul li{
display: block
}

http://jsfiddle.net/cuLgC/6/

インラインで表示すると、それらが 1 つの行に配置されます。ブロックでは、それらが別々の行に配置されます。これがフィドルで機能するのに役立つことを願っています。

于 2013-10-17T11:09:30.600 に答える
0

リストにタグを追加するだけ<br>です....これがそのフィドルです..[jsfiddle] [1]

[1]: http://jsfiddle.net/hh54D/7/ これが正しいことを願っています...

于 2013-10-17T11:09:32.000 に答える