我有两个关于flexbox的问题......
我想在导航栏中的ul项目之间留出空间,现在它们粘在一起......我怎样才能在链接之间获得一些空间。我可以在每个
/* -- 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>
&#13;
答案 0 :(得分:0)
1。 用这个 我不知道你为什么要避免填充?
library(dplyr)
library(ggplot2)
count(df, competence) %>%
ggplot(aes(x = reorder(competence, -n), y = n)) +
geom_col()