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

Posted 2023-03-05

【中文标题】在导航栏下方放置圆形按钮

【英文标题】：Putting rounded buttons underneath the nav bar

【发布时间】：2021-12-20 10:55:46

【问题描述】：

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

    <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"    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>

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

任何帮助将不胜感激。

【参考方案1】：

您可以根据自己的喜好使用 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>

【讨论】：

我正在尝试将圆形按钮的背景颜色更改为黄色。我这样做了，但它不起作用：button:hover background-color:yellow; 我做错了吗？

按钮的背景用 background 属性表示。不是背景颜色，因此您应该将代码更改为背景。我已经编辑了上面的 sn-p。一定要检查一下。

【参考方案2】：

如果您需要将display: flex 添加到元素，请使用.d-flex 或响应式变体之一（例如.d-sm-flex）。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav class="navbar" >
  <div class="container-fluid">
    <span class="navbar-brand" style="display:flex;">
      <img src="~/Images/Logo_Circle.png"    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>
  <ul class="d-flex">
    <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>

【参考方案3】：

<ul> 元素有一个 default display value 的块，<li> 元素有一个 default display value 的“list-item”，在这种情况下最终意味着块。具有display: block 样式规则的元素将“generate line breaks both before and after the element when in the normal flow.”

您应该为<ul> 元素赋予以下样式，<li> 链接将彼此相邻出现：

ul 
  display: flex;
  flex-direction: row;