Question

我的网站顶部有一个导航栏。

HTML：

NavButton(iconName:"search_icon", target: self, selector: #selector(handleSearch))

CSS：

<text align="center">
<div class="home-nav">
<a href="#whats-new"><button class="nav-btn">What's New</button></a>
<a href=""><button class="nav-btn">Community</button></a>
<button class="play-btn">Coming Soon</button>
<button class="nav-btn">Profile</button>
<a href=""><button class="nav-btn">Information</button></a>
</text>

我希望播放按钮比普通按钮大。但是当我使高度高于普通按钮并看它时，它会使正常的按钮改变位置。我该如何解决这个问题？

Answer 1

好的我已经对你的CSS样式进行了一些小的改动，试试这些并让我知道它的工作方式你想要与否。

body{
    margin:0; padding:0;
}
.home-nav {
    width:90%;
    margin: 0 auto;
    display: block;
    background-color:#F1B84E;
    border:5px solid #FFDE84;
    border-style:outset;
 }  

.nav-btn {
    width:auto;
    height:49px;
    background-color:#F1B84E;
    border:none;
    font-family:showcard gothic;
    color:white;
    -webkit-text-stroke:1.25px #000000;
    -webkit-text-fill-color:#FFFFFF;
    font-size:20px;
}

.play-btn {
    width:auto;
    height:70px;
    background-color:#79E119;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border:5px solid #FFFFFF;
    font-size:20px;
    font-family:showcard gothic;
    color:white;
   }

如何在不影响其他元素的情况下使按钮更高？

1 个答案: