flexbox 问题 ul 导航栏带有右侧填充

问题描述 投票：0回答：2

我有两个关于 Flexbox 的问题...

我想要导航栏中的 ul 项目之间有空间，现在它们粘在一起......我怎样才能在链接之间获得一些空间。我可以在每个

  • 上使用 padding-right，但我想避免这种情况......

    1. 如何将 6 个公司图片置于页脚中央？如您所见，我有三个媒体查询。因此，我需要移动设备上的一列中的所有图像，第二个媒体查询上的每行 2 个徽标，桌面上的每行 3 个徽标。

    /* -- reset -- */

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

ul {
  padding: 0;
  list-style-type: none;
}

/* div,
section,
footer,
nav {
  border: 1px solid black;
  overflow: auto;
} */

/* -- typography -- */

html {
  font-size: 10px;
}

body {
  font-family: "Lato", sans-serif;
  margin: auto;
  background-color: #f4f3f4;
}

p {
  color: #5b5e6d;
  font-size: 1.8em;
}

h1,
h2 {
  color: #2c303f;
  font-family: "Times New Roman";
}

ul {
  line-height: 2.5em;
  font-size: 1.5em;
  color: #5b5e6d;
}

/* -- layout -- */

.container {
  margin: 0 20px;
}

/* -- components -- */

/* -- components / buttons -- */

.btn {
  border-radius: 4px;
  box-shadow: none;
  line-height: 1.2em;
  border: none;
  padding: 25px;
  box-shadow: none;
  font-size: 1.8em;
  font-weight: 700;
}

.btn-main {
  background-color: #192592;
  color: white;
  width: 100%;
  width: 100%;
  color: white;
}

.btn-second {
  background-color: white;
  color: #192592;
  border: 1px solid #192592;
  width: 60%;
  margin: 10px;
}

/* -- components / navbar -- */

.navbar {
  background-color: #f4f3f4;
  position: fixed;
  width: 100%;
  z-index: 99999;
  border-bottom: 1px solid #b8b8b8;
  height: 60px;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar .top-menu-links {
  visibility: hidden;
}

.navbar .link-list {
  display: none;
}

.navbar .fa-bars {
  color: #5b5e6d;
}

.navbar .logo {
  height: 60px;
}

.landing {
  margin-bottom: 20px;
  padding-top: 30px;
}

.landing #main-title {
  font-size: 7em;
}

.marketing {
  font-size: 2.2em;
}

.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 20px;
}

.last-container {
  background-color: #e6e6e6;
}

.section .large-subtitle {
  font-size: 4em;
}

.responsive {
  width: 100%;
  height: auto;
}

.responsive-companies {
  width: 40%;
  height: auto;
  padding: 50px 0 20px 0;
}

/* -- footer -- */

.site-footer .site-map {
  padding-right: 40px;
}

.site-footer .site-map li:first-child {
  text-transform: uppercase;
  color: grey;
  font-weight: 900;
}

.site-footer .logo {
  width: 30%;
  margin: 0;
}

.site-footer .main {
  display: flex;
  justify-content: flex-start;
  font-size: 1.5em;
}

.site-footer .bottom {
  display: flex;
  flex-direction: row;
}

.site-footer .links {
  color: grey;
  font-weight: 900;
  font-size: 2em;
  justify-content: space-around;
}

.site-footer .change-language {
  justify-content: space-around;
  align-items: center;
  width: 60%;
  margin: 0 auto;
}

.site-footer .language {
  color: grey;
  font-size: 2em;
}

.site-footer .social-icons {
  display: flex;
  justify-content: space-around;
  font-size: 3em;
  width: 40%;
  margin: 0 auto;
  color: grey;
}

img.flag {
  width: 30px;
}

/* ----------- Mobile Screens ----------- */
/*
@media only screen and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
  body {
    background-color: blue;
  }
}
*/

/* ----------- Tablet Screens ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
  body {
    background-color: blue;
  }
  .company-logos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .company-logo {
    flex-basis: 45%;
  }
}

/* ----------- Desktop/Laptop Screens ----------- */
@media screen and (min-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
  body {
    background-color: red;
  }
  .company-logos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .company-logo {
    flex-basis: 30%;
  }
  .navbar .top-menu-hamburger {
    display: none;
  }

  .navbar .top-menu-links {
    visibility: visible;
  }
  .navbar .link-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <link rel="stylesheet" type="text/css" href="./stylesheets/style.css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <script src="https://use.fontawesome.com/1fb0eb3889.js"></script>
  <title>Where work happens | Slack</title>
</head>

<body>
  <nav class="navbar">
    <div class="container">
      <div>
        <img class="logo" src="https://www.seeklogo.net/wp-content/uploads/2015/09/slack-logo-vector-download.jpg" alt="slack_logo">
      </div>
      <div class="top-menu-links">
        <ul class="link-list">
          <li>
            <a href="#">Why Slack?</a>
          </li>
          <li>
            <a href="#">Pricing</a>
          </li>
          <li>
            <a href="#">About Us</a>
          </li>
          <li>
            <a href="#">Your Workspaces</a>
          </li>
        </ul>
      </div>
      <div class="top-menu-hamburger">
        <i class="fa fa-bars fa-3x" aria-hidden="true"></i>
      </div>
    </div>
  </nav>
  <header class="landing container">
    <h1 id="main-title">Where Work Happens</h1>
    <p class="marketing">When your team needs to kick off a project, hire a new employee, deploy some code, review a sales contract, finalize
      next year's budget, measure an A/B test, plan your next office opening, and more, Slack has you covered.</p>
    <button class="btn btn-main">GET STARTED</button>
    <p>Already using Slack?
      <a href="#">Sign in</a>
    </p>
    <br>
    <br>
    <img class="responsive" src="https://www.sherweb.com/blog/wp-content/uploads/Things-You-Should-Know-About-Microsoft-Teams-Banner.jpg"
      alt="home_work_happening">
  </header>
  <main>
    <div class="last-container">
      <div class="section container">
        <h2 class="large-subtitle">You´re in good company</h2>
        <p class="marketing">Millions of people around the world have already made Slack the place where their work happens.</p>
        <button class="btn btn-second">DISCOVER WHY</button>
        <div class="company-logos">
          <div class="company-logo">
            <img class="responsive-companies" src="https://www.freelogodesign.org/img/logo-ex-4.png" alt="">
          </div>
          <div class="company-logo">
            <img class="responsive-companies" src="https://www.freelogodesign.org/img/logo-ex-4.png" alt="">
          </div>
          <div class="company-logo">
            <img class="responsive-companies" src="https://www.freelogodesign.org/img/logo-ex-4.png" alt="">
          </div>
          <div class="company-logo">
            <img class="responsive-companies" src="https://www.freelogodesign.org/img/logo-ex-4.png" alt="">
          </div>
          <div class="company-logo">
            <img class="responsive-companies" src="https://www.freelogodesign.org/img/logo-ex-4.png" alt="">
          </div>
          <div class="company-logo">
            <img class="responsive-companies" src="https://www.freelogodesign.org/img/logo-ex-4.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="section container">
      <h2 class="large-subtitle">Try it for free</h2>
      <p>Already using Slack?
        <a href="">Sign in</a>
      </p>
      <button class="btn btn-main">GET STARTED</button>
    </div>
  </main>
  <footer class="site-footer">
    <img class="logo" src="./images/iso-slack.png" alt="">
    <div class="main container">
      <div>
        <ul class="site-map">
          <li>Company</li>
          <li>About Us</li>
          <li>Careers</li>
          <li>Blog</li>
          <li>Press</li>
          <li>Brand Guidelines</li>
        </ul>
        <ul class="site-map">
          <li>Resources</li>
          <li>Download</li>
          <li>Help Center</li>
          <li>Guides</li>
          <li>Events</li>
          <li>App Directory</li>
          <li>API</li>
        </ul>
      </div>
      <div>
        <ul class="site-map">
          <li>Product</li>
          <li>Why Slack?</li>
          <li>Enterprise</li>
          <li>Customer Stories</li>
          <li>Pricing</li>
          <li>Security</li>
        </ul>

        <ul class="site-map">
          <li>Extras</li>
          <li>Podcast</li>
          <li>Slack Shop</li>
          <li>Slack at Work</li>
          <li>Slack Fund</li>
        </ul>
      </div>

    </div>
    <div class="last-container">
      <div class="container">
        <ul class="bottom links">
          <li>Status</li>
          <li>Privacy & Terms</li>
          <li>Contact Us</li>
        </ul>
        <div class="bottom change-language">
          <div>
            <img class="flag" src="./images/us-flag.png" alt="">
          </div>
          <p class="language">English (US)
            <i class="fa fa-chevron-down" aria-hidden="true"></i>
          </p>
        </div>
        <div class="social-icons">
          <i class="fa fa-twitter" aria-hidden="true"></i>
          <i class="fa fa-facebook" aria-hidden="true"></i>
          <i class="fa fa-youtube-play" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </footer>
</body>

</html>

    • html css flexbox
    2个回答
    1
    投票

    1. 用这个 我不知道你为什么要避免填充？

     ul.link-list li {
    padding: 5px;
}
    0
    投票

    这是我的四个控制器之一（全部由 GitHub 分配）已安装在我的设备中，以及它们所做的其他可怕和非法的事情

    最新问题
    © www.soinside.com 2019 - 2024. All rights reserved.