中心ul标签水平在div

Question

如何将ul置于div内。

一个常见的建议是

• left:50%
• display:inline
的一些变体

但它不起作用。如何解决这个问题？

body {
  margin: 0;
  background: #f4f5f5;
}
.menu {
  text-align: center;
  margin: 0 auto;
  width: 1023px;
  background: #f4f5f5;
}
.picture {
  margin: 0 auto;
  width: 1023px;
  height: 255px;
  background: green;
}
ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
li a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

<div class="content">
  <div class="menu">
    <ul>
      <li><a>Test</a>
      </li>
      <li><a>Test</a>
      </li>
      <li><a>Test</a>
      </li>
      <li><a>Test</a>
      </li>
      <li><a>Test</a>
      </li>
      <li><a>Test</a>
      </li>
      <li><a>Test</a>
      </li>
    </ul>
  </div>
  <div class="picture">
  </div>
</div>

Answer 1

设置text-align:center和ul以及inline-block设置为li（删除float:left）

通过删除重复的代码来调整代码。

＆＃13;

＆＃13;

body {
  margin: 0;
  background: #f4f5f5;
}
.content {
  margin: 0 auto;
  width: 1023px;
}
.picture {
  height: 255px;
  background: green;
}
ul {
  list-style: none;
  background: #f4f5f5;
  padding: 0;
  margin: 0;
  text-align: center;
}
li {
  display: inline-block
}
li a {
  display: block;
  padding: 14px 16px;
  text-decoration: none;
}

＆＃13;

<div class="content">
  <ul>
    <li><a>Test</a>
    </li>
    <li><a>Test</a>
    </li>
    <li><a>Test</a>
    </li>
    <li><a>Test</a>
    </li>
    <li><a>Test</a>
    </li>
    <li><a>Test</a>
    </li>
    <li><a>Test</a>
    </li>
  </ul>
  <div class="picture">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这应解决问题

＆＃13;

＆＃13;

body{
        margin:0;
        background:#f4f5f5;
    }
    .menu {
        text-align: center;
        margin: 0 auto;
        width: 1023px;
        background: #f4f5f5;
    }
    .picture {
        margin:0 auto;
        width: 1023px;
        height: 255px;
        background: green;
    }
    ul {
        list-style: none;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
      display: inline-block;
    }
    li{
        float:left;
    }
    li a {
        display: block;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

＆＃13;

<div class="content">
    <div class="menu">
        <ul>
            <li><a>Test</a></li>
            <li><a>Test</a></li>
            <li><a>Test</a></li>
            <li><a>Test</a></li>
            <li><a>Test</a></li>
            <li><a>Test</a></li>
            <li><a>Test</a></li>
        </ul>
    </div>
    <div class="picture">
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用名为 Flexbox 的CSS3布局模式。

    .menu {
        display: flex;            // <-- necessary to activate flexbox
        justify-content: center;  // <-- centers horizontally
        // align-items: center;   // <-- would center vertically
        margin: 0 auto;
        width: 1023px;
        background: #f4f5f5;
    }

了解更多：
http://flexboxin5.com/
http://flexboxfroggy.com/