Question

this page 我正在尝试Flexbox。建立一个菜单。我没有定义边距，但我的菜单被从侧面推出。这是一个错误吗？还有其他想法吗？我真的被困了

`

<html>
  <head>
    <title>Ribbit - A flexbox Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <style type="text/css">
    body {
    background-color: #ff9;
    font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
     .row,
    .columns,
    nav ul {
      display: flex;
      flex-direction: column;
    }
    .row {
      background-color: rgba(255,255,255, .33);
      border: 1px solid rgba(150,150,150, .66); 
    }
    .columns {
    background-color: rgba(200,200,200, .5);
    border: 1px solid rgba(150,150,150, .66);
       }
    nav ul {
      text-transform:uppercase; 
      font-size: .75rem;
      font-weight: 900;
      letter-spacing: .025rem;
      list-style: none;
      border: 1px solid orange;
    }
      nav ul li {
      background-color: rgba(0,0,0, .9);
      padding: .75em 1em;
      border-bottom: 1px solid white;
      color: #fff;
      }
    @media (min-width: 769px) {
      body {
        background-color: #f9f;
      }
      nav ul {
      flex-direction: row;
      }
          nav ul li {
      display: flex;
      flex: 1;
    }   
    }
    @media (min-width: 1024px) {
      body {
        background-color: #9ff;
      }
    }
    </style> 
  </head>
  <body>
  <div class="row">
    <header class="row">
      <h1>Flexbox <span>Inc.</span></h1>
    </header>
  </div>
  <nav>
    <ul class="row">
      <li class="item">One</li>
      <li class="item">Two</li>
      <li class="item">Three</li>
      <li class="item">Four</li>
      <li class="item">Five</li>
    </ul>
  </nav>
  <div class="content row"> 
    <div class="main">
    <img src="http://placehold.it/1024x512/B4081E/ffffff/" width="100%" height="auto" alt="screenshot">
    <p>Cause longer included relaxing deal world's if. Calories world's one style refreshing worthwhile win newer world's introducing better class.</p>
    <p>Wholesome sleek below advanced crispy save spring elegent. Sold worthwhile spacious oily hearty. On screamin' tangy dazzling.</p> 
    <p>What appearance big credit-card bonus asked polished. More light sensible picky devour each appetizing newest duty people. Extra gigantic thank-you.</p> 
    <p>Absorbent vinyl thick industry now. Unique to thirsty absolutely settle smooth.</p>

    </div> 
    <div class="aside"></div> 
    <div class="promo"></div> 

  </div>
  <footer class="row">
    <div class="columns">
      <p>Twitter: this</p>
      <p>Facebook: this</p>
      <p>LinkedIN: this</p>
      <p>Pinterest: this</p>
    </div> 
  <div class="columns">
    <p>Cause longer included relaxing deal world's if. Calories world's one style refreshing worthwhile win newer world's introducing better class.</p>
    <p>Wholesome sleek below advanced crispy save spring elegent. Sold worthwhile spacious oily hearty. On screamin' tangy dazzling.</p> 
    <p>What appearance big credit-card bonus asked polished. More light sensible picky devour each appetizing newest duty people. Extra gigantic thank-you.</p> 
    <p>Absorbent vinyl thick industry now. Unique to thirsty absolutely settle smooth.</p>
  </div>
  <div class="columns"><p>&copy; 2005 Flexbox inc.</p></div> 
  </footer>
  </body>
  </html>

`

我很困惑，为什么菜单左侧有空格

Answer 1

大多数浏览器都有默认样式。在屏幕截图中，该列表会继承Chrome的默认左边距和上下边距。

flexbox左边距css

1 个答案: