Question

所以我得到了以下代码。

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”与上面的文字“社交媒体”完全一致，即使它们都与中心对齐。

我不知道为什么，但我希望这三个链接完全像上面的社交媒体文本那样集中，但事实并非如此。有什么想法吗？

这是一个显示问题的JSFiddle：

http://jsfiddle.net/cuLgC/

Answer 1

不是最好的方式，但是我将<br>放在两个列表元素之后，然后将它们放下。

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

Answer 2

更改

container ul li{
display: inline
}

要

container ul li{
display: block
}

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

显示内联将它们放在一行上将它们放在不同的行上，希望这有助于它在小提琴中起作用。

Answer 3

只需将<br>标记添加到列表中......这里就是小提琴.. [jsfiddle] [1]

[1]：http://jsfiddle.net/hh54D/7/希望这是对的......

Answer 4

如果我理解正确：

#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;*/
float: left; 
list-style: none;
width: 33.3%;    
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);
}

FIDDLE

Answer 5

以下是修补程序的更新小提琴：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次，他们会对齐，但不同长度的单词会根据其宽度进行分散。

文本不能正确对齐到中心

5 个答案: