javascript - 在导航栏中移动按钮，最佳做法？

标签 javascript html css

我已使用边距将导航栏中的 CTA“订阅”按钮移至最右侧。但我想知道是否有更好的方法来编写这段代码？

在使用边距之前，我根本无法让按钮移动，它最初位于其他导航栏链接项旁边。

我在下面附上了我正在使用的代码。

* {
    text-decoration: none;
}

body {
    background-color: #f3f3f3;
}

header {
   background-color: #fff; 
   width: 100%;
   height: 100%;
   display: block
}

.header-logo img {
    height:150px;
    margin-top: 10px;
    float: left;
    margin-right: 5px;
}

header nav ul {
    display: block;
    margin: 0 auto;
    width: fit-content;
    padding-top: 50px;
}

header nav ul li {
    display: inline-flex;
    float: left;
    list-style: none;
    padding: 0px 15px;
}

header nav ul li a {
    font-family:'Sorts Mill Goudy', serif;
    font-size: 24px;
    color: #111;
    text-transform: uppercase;
}

.sub {
    margin: 0px 1300px;
    float: right;
    height: auto;
  
    position: relative;
    z-index: 1000;
}

ul li a:hover {
    color: firebrick;
}

@media only screen and (min-width: 1000px){
    header .header-logo {
        float: left;
        padding: 15px 15px;
        height: 0px;
        max-width: 220px;
        display: table;
    }
    
    header nav ul {
        margin: 20px 0px 0px 20px;
        float: left;
    }
    
    header nav ul li a {
        line-height: 50px;
    }

    header .sub {
        display: block;
        font-family:'Sorts Mill Goudy', serif;
        font-size: 24px;
        color: #111;
        text-transform: uppercase;
        line-height: 40px;
        border: 2px solid #111;
        float: right;
        margin-right: 40px;
        margin-top: 5px;
        padding: 0 20px;
    }
}

/*INDEX*/

.index-banner {
    margin: 0 auto;
    width: 100%;
    height:calc(100vh - 100px);
    background-image: url('img/road_trip.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: table;
}

.index-banner h1 {
    font-family:'Karma', serif;
    font-size: 60px;
    font-weight: 100;
    line-height: 70px;
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px 8px #111;
}

.verticial-center {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
}

.footer {
    font-family:'Sorts Mill Goudy', serif;
    font-size: 16px;
    color: #111;
    margin: 0px 330px;
    padding: 15px;;
}

.hero-section {
    font-family:'Sorts Mill Goudy', serif;
    font-size: 24px;
    color: #111;
}

.hero-section {
    font-family:'Karma', serif;
    font-size: 40px;
    color: #111;
    text-align: center;
    padding: 25px;
}

.hero-paragraph {
    margin: 0 auto;
    width: 1895px;
    font-family:'Sorts Mill Goudy', serif;
    font-size: 24px;
    color: #111;
    text-align: center;
    padding: 25px;

}

@media only screen and (min-width: 1000px){
    .wrapper {
        width: 2000px;
        margin:0 auto;
    }
    .index-banner {
        height:500px;
    }

    .hero-paragraph {
    width: 2000px;
    margin:0 auto;
    }

    .hero-section {
    width: 2000px;
    margin:0 auto;
    }
}

/* FOOTER*/

footer {
    width: calc(100% - 80px);
    padding: 40px 40px;
    margin-top: 20px;
    background-color: #111;
    overflow: hidden;
}

footer ul {
    width: fit-content;
    float: left;
    padding-left: 20px;
}

footer ul li {
    display: block;
    list-style: none;
}

footer ul li a {
    font-family:'Sorts Mill Goudy', serif;
    font-size: 18px;
    color: #fff;
    line-height: 40px;
    }

.footer-sm {
    width: 50px;
    float: right;
}

.footer-sm img {
    width: 100%;
    margin-bottom: 10px;
    display: block;
}

@media only screen and (min-width: 1000px){
    footer ul li a {
        font-family:'Sorts Mill Goudy', serif;
        font-size: 18px;
        color: #fff;
        line-height: 40px;
        }
    

}
</head>
<body>
    <header>
        <div class="header-logo">
        <a href="index.html"> <img src="img/Milestonehackers.jpg" alt="Milestonehackers logo"></a>
        </div>
        <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="Podcasts.html">Podcast</a></li>
            <li><a href="Newsletter.html">Newsletter</a></li>
            <li><a href="Blog.html">Blog</a></li>
            <li><a href="Contact.html">Contact</a></li>
        <div class="sub">
            <li><a href="Subscribe.html">Subscribe</a></li>
        </div>
        </ul>
        </nav>
    </header>
    <main>
        <section class="index-banner">
            <div class="verticial-center">
            <h1>Milestonehackers Podcast & Newsletter</h1>
            </div>
        </section>
        <div class="wrapper">
        <section class="hero-section">
            <h2>What Can you Expect From our Podcast</h2>
            <p class="hero-paragraph">A host (meee, Paolo) interviewing various types of entrepreneurs or founders both technical and non-technical. Each entrepreneur has their own unique story that resulted in learning or experiencing something that can benefit our audience who may want to go down the entrepreneurial path!</p>
        </section>
        </div>
    </main>
    <div class="wrapper">
<footer>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="Podcasts.html">Podcast</a></li>
        <li><a href="Newsletter.html">Newsletter</a></li>
        <li><a href="Blog.html">Blog</a></li>
        <li><a href="Contact.html">Contact</a></li>
    </ul>
    <div class="footer-sm">
        <a href="https://twitter.com/Milestonehacker">
            <img src="img/twitter.png" alt="twiiter icon">
        <a href="https://open.spotify.com/show/2ZiIxv5Mr83seTtNsg3LD9">    
            <img src="img/spotify.png" alt="spotify icon">
        <a href="https://anchor.fm/s/ecb81f4/podcast/rss"></a>
            <img src="img/rss.png" alt="rss icon">
        </a>
    </div>
    <p class="footer">Copyright &copy; 2019; All Rights Reserved</p>
</footer>
    <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-database.js"></script>
    <script src="app.js"></script>
</div>
</body>
</html>

最佳答案

您可以通过从 ul 元素中删除 float 并添加 display flex 来实现。此外，从 .sub 元素中删除 float 和边距。然后通过添加 margin-left: auto 到 .sub 元素将移动到最右边。

请注意:您的英雄部分和其他一些元素的宽度为 2000 像素，这对于许多屏幕来说并不理想。您可以添加 max-width: 100% 以使其适合屏幕(如果它大于屏幕)。

查看这段代码:

* {
    text-decoration: none;
}

body {
    background-color: #f3f3f3;
}

header {
   background-color: #fff; 
   width: 100%;
   height: 100%;
   display: block
}

.header-logo img {
    height:150px;
    margin-top: 10px;
    float: left;
    margin-right: 5px;
}

header nav ul {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding-top: 50px;
		padding: 0;
}

header nav ul li {
    display: inline-flex;
    float: left;
    list-style: none;
    padding: 0px 15px;
}

header nav ul li a {
    font-family:'Sorts Mill Goudy', serif;
    font-size: 24px;
    color: #111;
    text-transform: uppercase;
}

.sub {
		/* Add margin-left: auto */
    margin-left: auto;
   /* float: right;*/
    height: auto;
  
    position: relative;
    z-index: 1000;
}

ul li a:hover {
    color: firebrick;
}

@media only screen and (min-width: 1000px){
    header .header-logo {
        float: left;
        padding: 15px 15px;
        height: 0px;
        max-width: 220px;
        display: table;
    }
    
    header nav ul {
        margin: 20px 0px 0px 20px;
        float: left;
    }
    
    header nav ul li a {
        line-height: 50px;
    }

    header .sub {
        display: block;
        font-family:'Sorts Mill Goudy', serif;
        font-size: 24px;
        color: #111;
        text-transform: uppercase;
        line-height: 40px;
        border: 2px solid #111;
        float: right;
        margin-right: 40px;
        margin-top: 5px;
        padding: 0 20px;
    }
}

/*INDEX*/

.index-banner {
    margin: 0 auto;
    width: 100%;
    height:calc(100vh - 100px);
    background-image: url('img/road_trip.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: table;
}

.index-banner h1 {
    font-family:'Karma', serif;
    font-size: 60px;
    font-weight: 100;
    line-height: 70px;
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px 8px #111;
}

.verticial-center {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
}

.footer {
    font-family:'Sorts Mill Goudy', serif;
    font-size: 16px;
    color: #111;
    margin: 0px 330px;
    padding: 15px;;
}

.hero-section {
    font-family:'Sorts Mill Goudy', serif;
    font-size: 24px;
    color: #111;
}

.hero-section {
    font-family:'Karma', serif;
    font-size: 40px;
    color: #111;
    text-align: center;
    padding: 25px;
}

.hero-paragraph {
    margin: 0 auto;
    width: 1895px;
    font-family:'Sorts Mill Goudy', serif;
    font-size: 24px;
    color: #111;
    text-align: center;
    padding: 25px;

}

@media only screen and (min-width: 1000px){
    .wrapper {
        width: 2000px;
        margin:0 auto;
    }
    .index-banner {
        height:500px;
    }

    .hero-paragraph {
    width: 2000px;
    margin:0 auto;
    }

    .hero-section {
    width: 2000px;
    margin:0 auto;
    }
}

/* FOOTER*/

footer {
    width: calc(100% - 80px);
    padding: 40px 40px;
    margin-top: 20px;
    background-color: #111;
    overflow: hidden;
}

footer ul {
    width: fit-content;
    float: left;
    padding-left: 20px;
}

footer ul li {
    display: block;
    list-style: none;
}

footer ul li a {
    font-family:'Sorts Mill Goudy', serif;
    font-size: 18px;
    color: #fff;
    line-height: 40px;
    }

.footer-sm {
    width: 50px;
    float: right;
}

.footer-sm img {
    width: 100%;
    margin-bottom: 10px;
    display: block;
}

@media only screen and (min-width: 1000px){
    footer ul li a {
        font-family:'Sorts Mill Goudy', serif;
        font-size: 18px;
        color: #fff;
        line-height: 40px;
        }
    

}
<body>
    <header>
        <div class="header-logo">
        <a href="index.html"> <img src="img/Milestonehackers.jpg" alt="Milestonehackers logo"></a>
        </div>
        <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="Podcasts.html">Podcast</a></li>
            <li><a href="Newsletter.html">Newsletter</a></li>
            <li><a href="Blog.html">Blog</a></li>
            <li><a href="Contact.html">Contact</a></li>
        <div class="sub">
            <li><a href="Subscribe.html">Subscribe</a></li>
        </div>
        </ul>
        </nav>
    </header>
    <main>
        <section class="index-banner">
            <div class="verticial-center">
            <h1>Milestonehackers Podcast & Newsletter</h1>
            </div>
        </section>
        <div class="wrapper">
        <section class="hero-section">
            <h2>What Can you Expect From our Podcast</h2>
            <p class="hero-paragraph">A host (meee, Paolo) interviewing various types of entrepreneurs or founders both technical and non-technical. Each entrepreneur has their own unique story that resulted in learning or experiencing something that can benefit our audience who may want to go down the entrepreneurial path!</p>
        </section>
        </div>
    </main>
    <div class="wrapper">
<footer>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="Podcasts.html">Podcast</a></li>
        <li><a href="Newsletter.html">Newsletter</a></li>
        <li><a href="Blog.html">Blog</a></li>
        <li><a href="Contact.html">Contact</a></li>
    </ul>
    <div class="footer-sm">
        <a href="https://twitter.com/Milestonehacker">
            <img src="img/twitter.png" alt="twiiter icon">
        <a href="https://open.spotify.com/show/2ZiIxv5Mr83seTtNsg3LD9">    
            <img src="img/spotify.png" alt="spotify icon">
        <a href="https://anchor.fm/s/ecb81f4/podcast/rss"></a>
            <img src="img/rss.png" alt="rss icon">
        </a>
    </div>
    <p class="footer">Copyright &copy; 2019; All Rights Reserved</p>
</footer>
    <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-database.js"></script>
    <script src="app.js"></script>
</div>

关于javascript - 在导航栏中移动按钮，最佳做法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58722330/

上一篇：html - 字体不会在输出中改变

下一篇：javascript - 如何使对象的 X 和 Y 位置响应 HTML Canvas 的宽度和高度？

相关文章：

javascript - 将html内容添加到js生成的类中

javascript - 嵌入文档时不需要的页面边框

javascript - AngularJS 多资源调用，仅处理最后一个

javascript - FirefoxOS 的内存映射等价物

javascript - React 不断转义属性中的 amp 字符 (&)

javascript - Leaflet 中的 Circle getBounds() 方法失败

javascript - 在 'body' 标签末尾添加文本/HTML

python - CSS 选择器无法识别数字

css - 怎么把 "=>"格式化成如图的样子？

javascript - 具有多级下拉菜单的最简单的 JQuery 动画导航栏

©2024 IT工具网  联系我们