Tips for showcasing a lineup horizontally with HTML and CSS

I'm currently working on creating a menu using HTML. I've included my links in an unordered list (ul) as shown below. In my CSS, I added a display:inline; property to the links to make them appear side by side like a menu. However, for some reason, it doesn't seem to be working.


        #menu a {
          text-decoration: none;
        }
        #menu ul {
          list-style: none;
        }
        #menu ul li a {
          display: inline;
        }
    


        <div id="menu">
          <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="about.php">About Us</a></li>
            <li><a href="offers.php">Special Offers</a></li>
            <li><a href="staff.php">Meet Our Staff</a></li>
            <li><a href="contact.php">Contact</a></li>
          </ul>
        </div>
htmlcss

Answer №1

Instead of focusing on the anchors, you should be targeting the list items since they are already inline by default:

#menu ul li {
    display: inline;
}

Check out this JSFiddle example

Answer №2

So close, but not quite there!

Your code is almost perfect, the only adjustment needed is that display: inline; should be applied to your <li> elements instead of the <a> elements:

#menu a {
  text-decoration: none;
}
#menu ul {
  list-style: none;
}
#menu ul li {
  display: inline;
}
<div id="menu">
  <ul>
    <li><a href="index.php">Home</a>
    </li>
    <li><a href="about.php">About Us</a>
    </li>
    <li><a href="offers.php">Special Offers</a>
    </li>
    <li><a href="staff.php">Meet Our Staff</a>
    </li>
    <li><a href="contact.php">Contact</a>
    </li>
  </ul>
</div>

(check out the Fiddle example as well)

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

Tips for incorporating HTML code within a select option value?

I am working with AngularJS to create a Visual Composer for a website. One feature I want to incorporate is the ability to add HTML code based on the selection made in a dropdown menu. However, I am struggling to figure out how to include the HTML within t ...

javascriptjqueryhtmlangularjs

How can I delete a hyperlink on a number from my iPhone or iPad?

Is there a way to prevent certain sets of numbers from being linked, like phone numbers do on iPhones? <h2>Table</h2> <table class="table table-sm table-striped table-hover"> <caption class="sr-only">Search Results</caption> ...

htmlioscss

Using two different colors in text with CSS

Is it possible to have text in two different colors like this: https://i.stack.imgur.com/R40W1.png In terms of HTML, I tried looking it up but found answers related to:- https://i.stack.imgur.com/GRAfI.png ...

htmlcsscolorstextcolor

Offspring element overrides styling of its parent

#popBox{ width:100%; height:100%; position:fixed; left:0; top:0; border-collapse:collapse; background:black; opacity:0.8; display:none; } <table id="popBox"> <tr> <td></td> <td></td> ...

htmlcss

Verify information and send messages using JavaScript validation

I need assistance with my HTML form and JavaScript code. I am trying to send a parameter from the form to JavaScript in order to check if the input matches any values in an array. If there is a match, I want an alert message to be sent. However, the issue ...

javascripthtml

The getImageData function is returning undefined RGB values

I am trying to create a feature where by clicking on an image, I can retrieve the RGB values of that specific pixel. Below is the code snippet I have implemented: <html> <body> <canvas id="kartina" width="500" height="500"></canvas&g ...

javascripthtmlcanvasgetimagedata

Can someone please explain the purpose of row-sm and row-cols-sm-n (where n<12)? I've come across the col-sm-n (where n<12) but I'm unsure about how row-sm is used

From my understanding, when using col-sm-n in Bootstrap, the columns in a row will stack on top of each other when the device screen width is less than the specified size for sm. But what about row-sm? Does it function similarly to col-sm? And what exactly ...

htmlcssbootstrap-4flexbox

Expanding the `div` element to visually occupy the entire vertical space

I'm facing a design challenge with my webpage layout. I have a fixed header and footer, but I need the content section to dynamically adjust its height between the two. The goal is to fill the remaining vertical space with a background-image in the co ...

htmlcss

Steps to convert HTML <li> elements into HTML <datalist> elements

In my HTML file, I have a list of objects within li elements that I would like to transfer to an HTML datalist within the same file. I am currently working on a Node.js Express framework application where the data within the li elements is coming from an S ...

htmlnode.jsexpress

"The functionality of the Bootstrap4 tab panel is not working properly for switching

I am currently working on creating 4 tab panels using Bootstrap 4. My goal is for the tab contents to fade in when I click on them. However, I am facing an issue where nothing happens when I click on the other panels. Do you have any insights on why this ...

htmlbootstrap-4

Utilizing Bootstrap 4: Opting for <select> over tabs (<li>)

Is there a way to customize the appearance of Bootstrap tabs by replacing them with a dropdown select menu instead of the standard tab layout created with <ul> and <li> elements? I am working with a relatively small area (such as col-3) where ...

javascripthtmljquerycssbootstrap-4

Clicking on a select box causes the scrollbar area to vanish, shifting all the page content to the right

I have successfully implemented overflow-y: scroll; to keep the scrollbar space always reserved and prevent content from shifting when the scrollbar appears. However, I noticed that when I click on a select element, this scrollbar space is lost. How can I ...

cssreactjssassmaterial-uireact-hooks

Real-Time Chat Update Script

Recently, I've been delving into PHP and attempting to create a live chat web application. The data for the chat is stored in a MySQL database, and I have written a function called UpdateDb() that refreshes the chat content displayed in a certain div ...

javascriptphphtmlajax

Achieve this effect by making sure that when a user scrolls on their browser, 50% of the content is entered into view and the remaining 50%

Is there a way to achieve this effect? Specifically, when the user scrolls in the browser, 50% of the content is displayed at the top and the other 50% is shown at the bottom. ...

javascriptjquerycss

CSS: Overlapping two divs with unique classes and varying margins - Unexpected occurrence or intentional design?

One thing I'm curious about: Will the margins of two different divs merge if they have the same value when intersecting? It appears so! Do paddings not merge when two different divs intersect, even if they have the same value? It seems that way! When ...

css

What could be the reason behind the link only functioning properly on macOS?

I tried accessing a link that works perfectly on Chrome, Safari, and Firefox on MacOS, but when I try to access it from Windows or Android, I get a 404 error in the browser. Here is an example link: This link is part of an m3u8 file, which can be accesse ...

htmlmacosoperating-system

What steps can I take to set a default value for a select tag if the option value is not a specific value?

<select name="corequisite"> <option value="" selected="selected">No Corequisite</option>'; $res = mysqli_query("SELECT * FROM course"); while($row = mysqli_fetch_array($res)){ echo'<option value="'.$row['Code&ap ...

phphtmlmysql

What are the potential drawbacks of utilizing <div> spacers in web design?

Is it considered poor practice to utilize <div> elements as a means of creating space between other elements? If so, what are the reasons behind this? For instance: <div class="panel"> <!-- Content --> </div> <div class="s ...

htmlcss

What is the best way to enable CSS IntelliSense for a Nuxt project?

Currently, I am undertaking a project using Nuxt.js and have set up a Docker image to manage all aspects of it. Additionally, I am looking to integrate MDBVue as a CSS library into my project. After some research, I learned that in order to utilize this li ...

cssvue.jsvisual-studio-codeintellisensenuxt.js

Could the quantity of JavaScript files impact the performance of a project and cause any delays?

In my current HTML and JavaScript project, I am incorporating multiple JavaScript files. I'm curious to learn about the potential impact of having numerous JavaScript files on a web project's efficiency and speed. Can anyone shed some light on th ...

javascripthtmlclient-side