个人中心
gpt4 book ai didi

html - 关于如何缩小导航栏选项之间的空白区域的任何想法？

转载 作者：行者123 更新时间：2023-11-28 00:57:25 25 4
gpt4 key购买 nike

我想减少“定价”、“工作原理”和“功能”之间的空间，如您所见here

我也知道我可以用 margin 做到这一点，但我尝试了很多不同的方法，但我只是没想好如何做到这一点，所以，如果你能帮我一把，那就太好了。

<!DOCTYPE html>
<html lang="en">

<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">                                                                                                                                                  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<title>Product Page</title>

<style type="text/css">

    body{
        background: #eee;
        font-family: 'Lato', sans-serif;
    }

    #header-img{
        float: left;
        width:18.5em;
        margin:15px 32px 0px 5px;
        }
    .nav-link{
        position: relative;
        float:right;
        padding: 24px 40px 15px 20px;

    }
    #hero{
        margin-top: 90px;
        text-align: center;
    }
    #header{
        overflow: hidden;
    }
    #email{
        max-width: 275px;
        width: 100%;
        box-sizing: border-box;
        padding:5px;

    }
    #form{
        text-align: -webkit-center;
        display: flex;
        flex-direction: column;
    }
    .btn{
        margin-top:13px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 150px;
        width: 100%;
        height: 30px;
        background-color: #f1c40f;
        padding: 0 20px;
        font-size: 1em;
        font-weight: 900;
        text-transform: uppercase;
        border: 3px;
        border-radius: 2px;
        cursor: pointer;
        }
    .flex{
        display:flex;
        margin-top: 80px;
        }
    .icon{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 125px;
        width: 20vw;
        color: darkorange;
        }
    .desc{
        display: flex;
        flex-direction: column;
        justify-content: unset;
        height: 125px;
        width: 80vw;
        padding: 41px 0px 0px 0px;
        text-align: start;
        }
    .eighttwo, p{
        padding: 0;
        margin: 0;
    }
    .divisor{
        margin-top: -40px;
    }

    .container{
        width:100%;
        max-width: 1000px;
    }
    a{  
        text-decoration: none;
        color: #000;
    }
    #nav-bar{
        display: flex;
        background: #eee;
        flex-direction: row; 
    }

    @media screen and (max-width: 410px) {
        #nav-bar {
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
            text-align: center;
            margin-top: 30px; 
            padding: 0 50px;
        }
    }


</style>

</head>

<body>

    <header id="header">



     <nav class="navbar fixed-top" id="nav-bar">

     <img src="trombones.jpg" id="header-img">

     <a class="nav-link" href="#pricing">Pricing</a>
     <a class="nav-link" href="#how-it-works">How It Works</a>
     <a class="nav-link" href="#features">Features</a>

     </nav>

    </header>

    <div id="hero">
     <h2>Handcrafted, home-made masterpieces</h2>
    </div> 

 <form id="form">

        <input id="email" type="email" placeholder="Enter your email address" required>

        <input id="submit" type="submit" value="Get Started" class="btn">

<div class="container">

    <section id="features">
        <div class="flex two">

            <div class="icon">
                <i class="fa fa-3x fa-fire"></i>
            </div>

            <div class="desc">
                <h2 class="eighttwo">Premium Materials</h2>
                <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
            </div>

        </div>

        <div class="flex divisor">

            <div class="icon">
                <i class="fa fa-3x fa-truck"></i>
            </div>

            <div class="desc">
                <h2 class="eighttwo">Fast Shipping</h2>
                <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
            </div>

        </div>

        <div class="flex divisor">

            <div class="icon">
                <i class="fa fa-3x fa-battery-full"></i>
            </div>

            <div class="desc">
                <h2 class="eighttwo">Quality Assurance</h2>
                <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
            </div> 
        </div>
    </section>
</div>

     <section id="how-it-works">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/y8Yv4pnO7qc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
        </iframe>
     </section>

 </form>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


 </body>
</html>

最佳答案

如果你使用 justify-content: space-between; 作为你的 flex 容器并且 margin-left: auto; 在你的第一个链接上，链接将是在其大小和填充允许的范围内尽可能向右移动 - 见下文。 (顺便说一句:删除 float: left - 它对 flex 元素没有影响)

#nav-bar {
  display: flex;
  background: #eee;
  flex-direction: row;
  justify-content: space-between;
}

.nav-link {
  padding: 24px 40px 15px 20px;
}

.nav-link:first-of-type {
  margin-left: auto;
}
<nav class="navbar fixed-top" id="nav-bar">

  <img src="trombones.jpg" id="header-img">

  <a class="nav-link" href="#pricing">Pricing</a>
  <a class="nav-link" href="#how-it-works">How It Works</a>
  <a class="nav-link" href="#features">Features</a>

</nav>

关于html - 关于如何缩小导航栏选项之间的空白区域的任何想法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52883343/

25 4 0
文章推荐： javascript - 为什么这些圆圈会出现在我的 Canvas 上？
文章推荐： C++ CRT 内存泄漏
文章推荐： javascript - 如何在一个 Vuejs 元素中使用多个模板？
文章推荐： javascript - 未定义 Photoswipe UI 默认值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com