What is the best way to position two navigation elements to the left and center?

I need the 'a' element to be positioned on the left side of the page and the 'ul' element to be centered.

I prefer not to rely on a library or use float: left. Also, applying display: inline; to the ul element is not producing the desired result, although it works with other elements.

  <nav class="nav">
    <a href="">Brand</a>
    <ul>
      <li><a [routerLink]="['/hot']">Hot</a></li>
      <li><a [routerLink]="['/trend']">Trend</a></li>
      <li><a [routerLink]="['/new']">New</a></li>
    </ul>
  </nav>
htmlcss

Answer №1

Consider this potential solution (assuming you want the ul to be centered): The ul is set as a centered inline-block, and the first a element is positioned to the left by setting its position to absolute (which defaults to left alignment).

nav {
  position: relative;
}

nav>a {
  position: absolute;
}

nav ul {
  position: relative;
  text-align: center;
}

nav ul li {
  display: inline;
}
<nav class="nav">
  <a href="">Brand</a>
  <ul>
    <li><a [routerLink]="['/hot']">Hot</a></li>
    <li><a [routerLink]="['/trend']">Trend</a></li>
    <li><a [routerLink]="['/new']">New</a></li>
  </ul>
</nav>

Answer №2

Check out the solution provided below which utilizes various display properties.

ul,li{ margin:0px; padding:0px; list-style:none;}
.nav ul{display:inline}
.nav ul li{ display:inline-block;}
<nav class="nav">
    <a href="">Brand</a>
    <ul>
      <li><a [routerLink]="['/hot']">Hot</a></li>
      <li><a [routerLink]="['/trend']>Trend</a></li>
      <li><a [routerLink]="['/new']>New</a></li>
    </ul>
  </nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting CSS Issues in ASP.NET Boilerplate

I am attempting to apply a CSS style to a text input similar to the one found on the CreateUser default page. However, I am encountering an issue where the blue line under the textbox does not appear when I navigate away from and then return to the page. ...

htmlcssangularaspnetboilerplate

What is the reason for using grid-lines instead of row and column numbers to position an item on the CSS grid?

During a recent tech presentation I delivered at my workplace on the new CSS grid spec, my manager posed an intriguing question that left me stumped. He wanted to know why elements positioned within a grid are identified based on the grid lines they fall b ...

csscss-grid

Resizing a damaged HTML table to fit within a designated width using CSS

Here is a challenge - I have some broken HTML that I can't touch, and don't want to use JavaScript to fix. My goal is to make it fit within a specific width: http://jsfiddle.net/P7A9m/2/ <div id="main"> <table> <tr> ...

htmlcsswidthhtml-table

Issue with submitting form in DjangoI am facing difficulties with the submission

I'm currently following a tutorial on creating an app similar to UberEats on code4startup. In the process of registering a new restaurant and restaurant owner in the database, I encountered an issue. Utilizing a Django form for handling data fields ha ...

pythonhtmldjangodjango-forms

Issue within the application causing a sudden shutdown

I have been encountering an application error in my android phonegap app. The issue arises when I transition from one page to another page, resulting in the following message: "A network error occurred.(file:///android_asset/www/home/home.html?userid=91 ...

androidhtmlcordova

Aligning items to the left and center using CSS flexbox

Is there a way to align the first element to the left and the second element to the center within a flex container? I've tried using different options like justify-content and align-items with center, but I can't seem to get the second element in ...

htmlcss

The Javascript file seems to be unable to recognize the reference to an Angular directive

When working on my project, I encountered an issue with my EventController.js not recognizing the reference to ng-app="eventsApp" from app.js. I followed a tutorial on Pluralsight. Even though it works for the instructor, I keep seeing {{event.name}} inst ...

javascripthtmlangularjs

What is the name of the outlining structure in HTML5 known as?

A few days back, I came across an article discussing the usage of multiple h1 tags on the same web page. It also mentioned a specific structure that allows for multiple article, header, footer tags, and more. Unfortunately, today I'm struggling to rec ...

html

What is the solution to this issue? How can I break the grid row in Bootstrap 4? Which specific Bootstrap classes should I apply for this task?

Test Links. Utilizing Bootstrap classes, adjust the div element with the ID "links" to display differently based on screen resolutions. On extra small screens (<576px), each link and ad should occupy one whole row. It will have this appearance: https:// ...

htmlcsstwitter-bootstrapbootstrap-4

Some of the CSS code in my file is not displaying properly on my ejs file

For some reason, only the CSS styles for my footer are rendering on my ejs file. The rest of my CSS doesn't render at all. I've tried defining the path of my static files to my views directory using the path method: app.use(express.static(path.jo ...

cssnode.jsexpressejs

FontAwesome symbols are not displaying on any chromium-based web browsers

I have been updating a theme from fontawesome 4 to 5, and everything seems to be working fine except for one specific icon that is displayed as a css pseudo-element. Even though I followed the guidelines in the FA docs, the icon still does not appear. It ...

cssfont-awesomepseudo-element

The key to highlighting the search terms in bold format

How can I highlight the search terms entered by users in the search box? I want all keywords in every search result to be bolded. For example, when a search term is entered and the results page displays all results with the typed term in bold within each ...

phpcsssql

"Interaction with jQuery causes button element to shift position upon resizing of browser

I am encountering an issue with a div element that has jQuery appended to it for a bounce effect. The element is absolutely positioned within its relative parent. However, when the browser is resized, the child element does not remain centrally aligned dur ...

jqueryhtmlcss

`Cannot Get jQuery ScrollTop Function to Work for 2nd Element`

Having trouble with an issue. Let me explain. I implemented a scrollTop Jquery on page load that scrolls down after a delay to prompt user action. However, I'm facing a problem where another scrollTop doesn't work after clicking buttons "#b3,#b3 ...

javascriptjqueryhtmlcss

What causes the NavBar to show and hide within a specific range?

Recently, I encountered a perplexing issue with my navbar. It functions correctly except for one strange behavior that has left me baffled. Why does the menu appear when I adjust the width to 631px, but disappear at 600px? And vice versa – why does it wo ...

htmlcssangulartypescript

Form tag abruptly disappears in Chrome inspector

As I delved into someone's .asp code, I stumbled upon a concerning discovery - an unclosed HTML tag. To unravel this mystery, I turned to Chrome and its inspector tool only to find the missing tag right there in front of me! Puzzled, I returned to th ...

phphtmlgoogle-chrome-devtools

Tips for resolving issues with the carousel container in bootstrap?

Is there a way to adjust the carousel box container in Bootstrap so that it remains consistent even with images of varying sizes? Currently, the box size changes based on the image dimensions when sliding through the carousel. Sample Code: <h1>Caro ...

javascriptjqueryhtmltwitter-bootstrapcarousel

What is the best way to keep a bootstrap navbar fixed at the top when scrolling? (It's a bit tricky)

Check out this image of my website header. HERE Is there a way to achieve a smooth scrolling effect for the blue navbar as I scroll down the page? (Specifically just the navbar, excluding the logo and social media elements). Using position:fixed; does ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for managing page navigation and incoming links on a site that uses only ajax technology

Currently, I am in the process of developing a fully ajax-based website which presents a challenge - the inability to provide direct page links. To address this, I have implemented a functionality where the page name gets appended to the URL each time an a ...

javascriptphpjqueryhtmlajax

Can you show the outcome of a JavaScript function within an API data object?

After entering fixed values in my input forms to display the order value accurately, I realized that taxes and fees were not included in the total. An example of input: Example input <input type="checkbox" name="item1" value=" ...

javascripthtmlnode.jsapiexpress