overflow-x链接应该在下一行的中心

Question

如果在调整浏览器窗口大小时，溢出-x的链接应位于下一行的中心，我该如何做到这一点？ 我只是希望在x轴上溢出的每个链接都放在下一行的中心位置。

＆＃13;

＆＃13;

/* CSS */
.upper-nav-bar ul {
    border: 1px solid black;
    list-style-type: none;
    margin-top: 0;
    padding-top: 0;
    margin-left: 6%;
    margin-right: 6%;
    padding-left: 6%;
    padding-right: 6%;
}

.upper-nav-bar ul li {
    display: inline-block;
}

.upper-nav-bar ul a {
    font-size: 10px;
    text-decoration: none;
    font-family: sans-serif;
    color: #c4cccc;
    text-align: center;
    padding-right: 9px;
    padding-left: 9px;
    text-decoration: none;
}

＆＃13;

<div class="upper-nav-bar">
  <ul>
    <li><a href="#!">EPAPER</a></li>
    <li><a href="#!">LIVE TV</a></li>
    <li><a href="#!">DAWNNEWS URDU</a></li>
    <li><a href="#!">IMAGES</a></li>
    <li><a href="#!">EVENTS / SUPPLEMENTS</a></li>
    <li id="last-child"><a href="#!">OBITUARIES</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您想将所有链接置于中心，那么

    /* CSS */
    .upper-nav-bar ul {
    border: 1px solid black;
    list-style-type: none;
    margin-top: 0;
    padding-top: 0;
    margin-left: 6%;
    margin-right: 6%;
    padding-left: 6%;
    padding-right: 6%;
    }

   .upper-nav-bar ul li {
   display: inline-block;
    }
   ul{
   text-align: center;
   }

    .upper-nav-bar ul a {
    font-size: 10px;
    text-decoration: none;
    font-family: sans-serif;
    color: #c4cccc;
    text-align: center;
    padding-right: 9px;
    padding-left: 9px;
    text-decoration: none;
    }

<div class="upper-nav-bar">
        <ul>
        <li><a href="#!">EPAPER</a></li>
        <li><a href="#!">LIVE TV</a></li>
        <li><a href="#!">DAWNNEWS URDU</a></li>
        <li><a href="#!">IMAGES</a></li>
        <li><a href="#!">EVENTS / SUPPLEMENTS</a></li>
        <li id="last-child"><a href="#!">OBITUARIES</a></li>
        </ul>
    </div>

Answer 2

试试这个：

.upper-nav-bar ul {
    text-align: center;
   //other codes...
}

＆＃13;

＆＃13;

    .upper-nav-bar ul {
    border: 1px solid black;
    list-style-type: none;
    margin-top: 0;
    padding-top: 0;
    margin-left: 6%;
    margin-right: 6%;
    padding-left: 6%;
    padding-right: 6%;
    text-align: center;
    }

    .upper-nav-bar ul li {
    display: inline-block;
    }

    .upper-nav-bar ul a {
    font-size: 10px;
    text-decoration: none;
    font-family: sans-serif;
    color: #c4cccc;
    text-align: center;
    padding-right: 9px;
    padding-left: 9px;
    text-decoration: none;
    }

＆＃13;

    <div class="upper-nav-bar">
        <ul>
        <li><a href="#!">EPAPER</a></li>
        <li><a href="#!">LIVE TV</a></li>
        <li><a href="#!">DAWNNEWS URDU</a></li>
        <li><a href="#!">IMAGES</a></li>
        <li><a href="#!">EVENTS / SUPPLEMENTS</a></li>
        <li id="last-child"><a href="#!">OBITUARIES</a></li>
        </ul>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将text-align: center应用于ul代码。

我还使用了margin和padding shorthand styling。它有助于显着缩短代码，在我看来，提高了可读性。

＆＃13;

＆＃13;

/* CSS */
.upper-nav-bar ul {
  border: 1px solid black;
  list-style-type: none;
  margin: 0 6%;
  padding: 0 6%;
  text-align: center;
}

.upper-nav-bar ul li {
  display: inline-block;
}

.upper-nav-bar ul a {
  font-size: 10px;
  text-decoration: none;
  font-family: sans-serif;
  color: #c4cccc;
  text-align: center;
  padding: 0 9px;
  text-decoration: none;
}

＆＃13;

<div class="upper-nav-bar">
  <ul>
    <li><a href="#!">EPAPER</a></li>
    <li><a href="#!">LIVE TV</a></li>
    <li><a href="#!">DAWNNEWS URDU</a></li>
    <li><a href="#!">IMAGES</a></li>
    <li><a href="#!">EVENTS / SUPPLEMENTS</a></li>
    <li id="last-child"><a href="#!">OBITUARIES</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;