Question

我使用按钮为我的网站创建了导航部分。它看起来很好，但是当我最小化窗口时，按钮相互叠加并开始重叠。有什么方法可以让它们更具响应性，所以当窗口被缩小时，它们可能会在彼此之下显示出来吗？感谢您的任何建议：）

    <nav>

        <div class="nav">
            <a href="index.html" class ="button">Home</a>
            <a href="about.html" class ="button">Rooms</a>      
            <a href="Contact.html" class ="button">Contact</a>
            <a href="Testimonials.html"" class ="button">Testimonials</a>
            <a href="FAQ's.html" class ="button">FAQ's</a>
        </div>
    </nav>

CSS

.nav {

    background-color: #A0BBF3;
    float: center;
    display: block;
    color: #0F49C5;
    text-align: center;
    padding: 1px 2px;
    font-variant: small-caps;
    font-size: 1.1em;

}


.nav a:hover {
    background-color: #0F49C5;
    color: #A0BBF3;

}
    .button {
      text-decoration: none;
      background-color: #4E7DE0;
      color: #A0BBF3;
      padding: 4px 8px 4px 8px;
      border-top: 2px solid #7298E9;
      border-right: 2px solid #2D63D4;
      border-bottom: 2px solid #2D63D4;
      border-left: 2px solid #7298E9;
    }

Answer 1

我建议尝试使用flexbox

https://www.w3schools.com/css/css3_flexbox.asp

Answer 2

尝试使用Bootstrap 4类来提高页面的响应速度。 Bootstrap使用网格系统和弹性框显示，您可以使用它轻松设置媒体查询。您可以设置分页的值。

例如：

<div class="col-md-4 col-lg-2">
<button class="btn btn-primary btn-block">Button</button>
</div>

Answer 3

您可以将此css添加到.nav，以便按照您想要的方式对齐项目。

justify-content: center!important;
display: flex!important;

https://www.codeply.com/go/Ww1bAiQKLU

响应式导航按钮

3 个答案: