时间戳

首页 > 解决方案 > 在导航栏下方放置圆形按钮

html - 在导航栏下方放置圆形按钮

问题描述

我的母版页上有一个导航栏。下面是代码：

    <nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:90%; height:14% ">
  <div class="container-fluid">
    <span class="navbar-brand" style="display:flex;">
      <img src="~/Images/Logo_Circle.png" alt="RCA" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />
       <span style="font-size:25px;color:white;"><span style="color:#e9c46a">My City Name</span><br />My Company Name</span>
    </span>
  </div>

</nav>

我想在导航栏下方放置一个圆形按钮，导航栏和圆形按钮之间没有任何空间。这是我的导航栏现在的样子：

在此处输入图像描述

在这个栏的正下方，我想放置圆形按钮。以下是我正在尝试做的事情：

在此处输入图像描述

下面是代码：

<div data-role="navbar">
<ul>
    <li> <a href="#" class="ui-btn-active nav-border" id=viewtherecent> Recent </a> </li>
    <li> <a href="#" class="nav-border" id=viewthefrequency> Frequent </a> </li>
</ul>
</div>

我试图将这些按钮放在导航栏下方，但它们是垂直而不是水平的。

任何帮助将不胜感激。

标签： htmlcssbootstrap-4flexbox

解决方案

您可以根据自己的喜好使用 flexbox 垂直或水平对齐我们的按钮。

请检查下面的代码，我已经制作了一个带有您想要的按钮的导航栏。

*{
margin:0;
}
nav{
  background:blue;
 }
 
 ul{
 display:flex;
 }
 
 .buttons{
 display:flex;
 width:100%;
 }
 
 button{
 width:200px;
 border-radius:20px;
 }
 
 button:nth-of-type(1){
background:lightblue;
color:white;
}

button:hover{
background:yellow;
}
<nav>
  <ul>
    <li>Home</li>
    <li>Page1</li>
  </ul>
</nav>

<div class="buttons">
  <button>Now</button>
  <button>Recent</button>
</div>

推荐阅读