I have a navigation bar on my master page. Below is the code:

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

I want to put a rounded button right underneath the navigation bar without any space between the navbar and the rounded buttons. This is how my nav bar looks right now:

right underneath this bar, I want to put the rounded buttons. Below is something, I am trying to do :

Below is the code:

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

I tried to put these buttons underneath the navbar, but they're coming vertically rather than horizontally.

any help will be greatly appreciated.

CodePudding user response：

Should you need to add display: flex to an element, do so with .d-flex or one of the responsive variants (e.g., .d-sm-flex).

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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" 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>
  <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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

<ul> elements have a default display value of block, and <li> elements have a default display value of "list-item" which ends up meaning block in this context. Elements with the display: block style rule will "generate line breaks both before and after the element when in the normal flow."

You should give the <ul> element the following style and the <li> links will appear next to each other:

ul {
  display: flex;
  flex-direction: row;
}