CSS 按钮不会显示内联和溢出 div答案

【问题标题】：CSS buttons won't display inline and overflow divCSS 按钮不会显示内联和溢出 div
【发布时间】：2016-02-15 23:55:27
【问题描述】：

我是编程新手，几天来一直试图让我的按钮在其 div 的中心水平对齐。我已经尝试过 display: inline 和 display: inline-block 以及我在这个论坛上找到的所有不同的解决方案，但没有一个对我有用。这是按钮的css：

  div.contact {
      padding: 0px;
      margin: 0px;
      background: #d6d6c2 url(https://clcadvisors.files.wordpress.com/2015/10/img_0914-0.jpg) no-repeat center;
      background-size: cover;
      height: 300px;
      overflow: hidden;
}

ul.soc {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  position: relative;
  display: inline-block;
}

li.socbutton a {
  background-color: gray;
  border: 2px solid black;
  border-radius: 10px;
  color: white;
  text-align: center;
  text-decoration: none;
  text-shadow: 2px 2px black;
  font-size: 24px;
  margin: 20px;
  padding: 20px;
  box-shadow: 10px 10px 5px black;
  width: 250px;

}

HTML：

<div class="contact">
    <h3>Contact</h3>
    <div>
      <ul class="soc">
      <li class="socbutton">
        <a href="    https://www.linkedin.com/in/jason-conley-744b27111/" target="blank"><i class= "fa fa-linkedin-square fa-fw"></i>LINKEDIN</a>
      </li>
      <li class="socbutton">
        <a href="https://twitter.com/JHConley/" target="blank"><i class= "fa fa-twitter fa-fw"></i>TWITTER</a>
      </li>
      <li class="socbutton">
        <a href="https://www.facebook.com/jason.conley.9231712/" target="blank"><i class= "fa fa-facebook-official fa-fw"></i>FACEBOOK</a>
      </li>
      </ul>
    </div>
  </div>

以及我在 http://codepen.io/SHENKU360/pen/VedRbP 中构建的 codepen 的链接

提前感谢您的帮助！

【问题讨论】：

欢迎...但有一件事。 Stack Overflow 不是一个论坛。他们对此很挑剔。
感谢指正:o)

标签： html css

【解决方案1】：

将此添加到您的 CSS：

ul.soc {
  width: 100%;
  text-align: center;
}
ul.soc li {
  display: inline-block;  
}

这会将“未排序列表”元素中的所有内容对齐到中心。该元素还需要 100% 的宽度。里面的所有列表元素都应该是display: inline-block;。

【讨论】：

【解决方案2】：

您需要内联lis，而不是as：

li.socbutton {
    display: inline-block;
}

并使ul 居中：

ul.soc {
    display: block;
    text-align: center;
}

【讨论】：

【解决方案3】：

在你的 css 中添加以下代码

li{
overflow: hidden;
margin-left:auto;
margin-right:0px; }

这个链接也很有帮助https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/

【讨论】：