Question

我想将列表置于顶层菜单中。

我不知道问题出在哪里。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Joshua Brown</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    
    .top-menu {
      width: 100%;
      height: 80px;
      background-color: #3f3535;
    }
    
    p {
      font-size: 42px;
      font-weight: lighter;
      font-family: sans-serif;
      color: #2991d9;
      padding-left: 100px;
      padding-top: 10px;
    }
    
    li {
      display: inline-block;
      float: right;
      color: #FFF;
      text-transform: uppercase;
      border-style: 1px #6f6767 solid;
      flex: auto;
      text-align: center;
      list-style-type: none;
      border-right: 1px #6f6767 solid;
    }
    
    li:first-child {
      border-style: none;
    }
    
    ul {
      display: flex;
      margin-bottom: 0;
    }
    
    .li {
      padding-left: 50%
    }
  </style>
</head>

<body>
  <div class="top-menu">
    <p>JOSHUA BROWN</p>
    <div class="li">
      <ul>
        <li>contact</li>
        <li>news</li>
        <li>concerts</li>
        <li>videos</li>
        <li>photos</li>
        <li>bio</li>
        <li>home</li>
      </ul>
    </div>
  </div>
</body>

</html>

Answer 1

问题是您已经提供了.li元素padding-left: 50%，偏移了50％，而不是中心它。也就是说，左手边缘恰好位于中间。实际上已经居中;这个填充物只会让你失望。但是，您可能还希望在某些断点处使用max-width来限制它，以便它不会占据行的整个宽度。

您还标题为<p>的{{1}}标记为padding-left的{{1}}，它不适用于移动设备......而且它是一个相当通用的选择器。我建议您删除100px填充，然后将<p>更改为<p>。要使您的标题居中，您只需<h1>上的text-align: center。

最后，您已经提供了.top-menu元素<ul>，但是您的display: flex元素<li>。 display: inline-block项应更改为<li>，并inline-flex将其水平居中。

我已经解决了所有这些问题，可以在以下示例中看到：

＆＃13;

justify-content: center

＆＃13;

Answer 2

首先，永远不要使用诸如'li'之类的已知名称作为类名。解决方案是只使用text-align：center并删除li类;这是一个片段。

* {
      padding: 0;
      margin: 0;
    }
    
    .top-menu {
      width: 100%;
      height: 80px;
      background-color: #3f3535;
    }
    
    p {
      font-size: 42px;
      font-weight: lighter;
      font-family: sans-serif;
      color: #2991d9;
      padding-left: 100px;
      padding-top: 10px;
    }
    
    li {
      display: inline-block;
      float: right;
      color: #FFF;
      text-transform: uppercase;
      border-style: 1px #6f6767 solid;
      flex: auto;
      text-align: center;
      list-style-type: none;
      border-right: 1px #6f6767 solid;
    }
    
    li:first-child {
      border-style: none;
    }
    
    ul {
      display: flex;
      margin-bottom: 0;
      text-align:center;
    }
    
    .li {
      padding-left: 50%
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Joshua Brown</title>
  
</head>

<body>
  <div class="top-menu">
    <p>JOSHUA BROWN</p>
    
      <ul>
        <li>contact</li>
        <li>news</li>
        <li>concerts</li>
        <li>videos</li>
        <li>photos</li>
        <li>bio</li>
        <li>home</li>
      </ul>
    </div>
  
</body>

</html>

Answer 3

在样式表中删除此行：

.li{ padding-left: 50% }

See fiddle here

如何在div中垂直居中列表？

3 个答案: