Aligning the last element within a list

I'm having a major issue with this code. Despite reading all related posts, I still can't get it to work. Seems like I might be missing something obvious. LOL.

Here is the site (best viewed in Chrome): and here is what I believe is the simplified code: http://jsfiddle.net/r8Rc9/4/

<div id="menubar" align="center">
    <ul class="menu">
        <li class="home"><a href="index.html">Home</a></li>
        <li class="services"><a href="services.html">Services</a></li>
        <li class="enquiry"><a href="enquiry.html">Enquiry</a></li>
        <li class="aboutaal"><a href="aboutall.html">About AAL</a></li>
        <li class="contactus"><a href="contactus.html">Contact us</a></li>
    </ul>
</div>

<style>
#menubar { height:50px; width:735px;}
#menubar ul { display:inline;}
#menubar li { margin:0 0 0 0; padding:0 0 0 0; border:0; list-style-type:none; display:block; float:left;}
#menubar li a:link, #menubar li a:visited { display:block; height:50px; width:147px;}
</style>

Could someone please assist me in aligning that last 'li' element? It's acting bizarrely in Chrome. Thanks a lot for any help offered.

htmlcssgoogle-chrome

Answer №1

Create a CSS stylesheet using the code snippet below:

#menubar ul {
    display: block;
    padding: 0;
    margin: 0;
}

Check out the live demo here!

Answer №2

To enhance the width of the navigation bar with id #menubar

For example,

#menubar {
    height:50px;
    width:775px;
    }

SEE LIVE DEMO

Answer №3

click here for a live demo

Make the following changes: remove float:left; from li and add float:left; to a tag.

#menubar {height:50px;width:735px;}
#menubar ul { display:inline;}
#menubar li { margin:0 0 0 0; padding:0 0 0 0; border:0; list-style-type:none; display:block;}
#menubar li a:link, #menubar li a:visited { display:block; height:50px; width:147px; float: left;}

Answer №4

Here is a suggestion for you:

<div id="menubar" align="center">
    <ul class="menu">
        <li class="home"><a href="index.html">Home</a></li>
        <li class="services"><a href="services.html">Services</a></li>
        <li class="enquiry"><a href="enquiry.html">Enquiry</a></li>
        <li class="aboutaal"><a href="aboutall.html">About AAL</a></li>
        <li class="contactus"><a href="contactus.html">Contact us</a></li>
    </ul>
</div>

<style>
#menubar { height:50px; width:735px;}
#menubar ul { display:inline;}
#menubar .menu li { margin:0 0 0 0; padding:0 0 0 0; border:0; list-style-type:none; display:block; float:left;}
#menubar .menu li a:link, #menubar li a:visited { display:block; height:50px; width:147px;}
#menubar .menu li:last-child{
  /*do something with last li*/
}
</style>

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

Ways to position Bootstrap 4 navbar elements at the bottom

Struggling to adjust the alignment of the text in the navbar items using Bootstrap 4? My initial thought was to align them at the bottom of the ul and then position the ul accordingly, but I'm facing challenges with both. The objective is to have the ...

csstwitter-bootstrapbootstrap-4

Enhancing quiz results with intricate input forms using JavaScript

I am currently working on an online quiz and the code is functioning properly. However, I would like to display the scores of each user. As a beginner in Javascript, I have been developing this quiz for a friend, and it has been a learning experience for m ...

javascriptphphtml

What strategies can be employed to enhance the natural movement of dots on my HTML canvas?

Check out my code pen here I'm looking for feedback on how to make the movement of the canvas dots more fluid and liquid-like. I've experimented with restricting the direction for a certain number of renders (draw()), which has shown some impro ...

javascripthtmlcanvas

A step-by-step guide on setting up an event listener for dynamically generated HTML using JavaScript objects

In my JavaScript code, I am creating object instances that include HTML elements in the form of buttons. These buttons are dynamic and have words generated dynamically as well. I want these buttons to execute certain functions when clicked. The challenge I ...

javascriptjqueryhtml

I desire the div to display based on the conditions set in the PHP file

Hi, I am looking to display the div with ID "msga" when a certain condition is met and show the div with ID "msgb" when another condition is met. Here is my PHP code: if(isset($_POST['aa'])) { echo "a"; } if (isset($_POST['bb']))) { ...

phpjqueryhtmlajax

Tips for aligning 2 columns when both table cells contain inner tables

Concerning my HTML table, cells #3 and #4 contain inner tables. I am facing an issue with aligning the rows within each table in cell #3 and cell #4 properly. Sometimes, the length of text in a row exceeds a single line, causing misalignment with the othe ...

htmlcss

Is it possible to modify Bootstrap 4 variables using its own variables?

I am currently utilizing the latest Bootstrap 4 beta 2 and attempting to customize it by altering the variables to suit my preferences. Within my styles.scss file, I have included all necessary bootstrap imports: // Custom variables @import 'helpers ...

csssassbootstrap-4

Identifying the presence of a CSS class in order to add styling to a different element

Looking for help with CSS: /* targeting laptops */ @media only screen and (pointer:fine) and (max-device-height: 620px) { #root:has(.projects) ~ body { overflow: auto; /* allow scrolling */ } } My desired outcome is to set overflow: auto o ...

javascripthtmlcssreactjs

Can you explain the significance of the ">" symbol within CSS coding?

Seeking some quick points for those in the know. Can someone provide a thorough explanation of the meaning and proper usage of the > symbol? Appreciate it. ...

htmlcsscss-selectors

hide the scroll button when at the top of the page and hide it when at the bottom

Looking to create a vertical scroll that hides the up button when at the top and hides the down button when at the bottom? Jquery can help with this, but sometimes it's tricky to get it just right. Take a look at an example here. Below is the code sn ...

jqueryhtmlcssscroll

What is the best way to create a navigation link in PHP along with forms?

If the login credentials are correct, I will be directed to the member page. If not, I should remain on the same page. I am struggling with how to create a link to another page. I have come across some suggestions involving headers, but I am still unsure o ...

phphtml

Acquire the stripe color scheme of Bootstrap tables

I have a Razor component that populates a series of divs within a container. Is there a way to utilize the table-striped color scheme for my odd divs without replacing it entirely? Alternatively, if I create a new CSS class called "Div-Stripe-Row." Can ...

cssbootstrap-5

Printing a modified div element that was created using jQuery on an ASP.NET MVC webpage after the initial page has finished loading

In my view, there is a div that holds multiple tables generated based on the model. Each row in these tables contains fields that can be edited using TextBoxFor. Through jQuery, rows can be moved between tables and new tables can be created dynamically wit ...

javascriptjqueryhtmlasp.net-mvc

Angular allows for the creation of a unique webpage layout featuring 6 divs

I am working on a project where I have an image of a car and I need to overlay 6 divs onto the image which can be selected with a mouse click. When a user clicks on one of the divs, it should change color. I've attempted using z-index, but it doesn&ap ...

htmlangular

What is the method for adding a tag within a specific div ID in ExtJS?

I am looking to insert a new tag within existing tags using extjs, based on the div id 'task123', and also trigger an alert message accordingly. Below is the HTML code snippet: <div id="task123"> <div class="msg" id="sample"> ...

javascriptjquerycsshtmlextjs

What's Going on with My Angular Dropdown Menu?

Snippet of HTML code: <li class="nav-item dropdown pe-3"> <a class="nav-link nav-profile d-flex align-items-center pe-0" (click)="toggleProfileMenu()"> <img src="assets/img/profile-img.jpg" alt=& ...

htmlangulartypescriptdropdownbootstrap-5

The image is not properly aligned with the background image

I'm currently working on a page design using bootstrap and css where I want images to fade and reveal the background when hovered over. The challenge I'm facing is that although all images are set to 100px in size, there is white space visible ar ...

htmlcssimagetwitter-bootstrap

Show dynamic HTML Dropdowns with nested JSON data

I've been racking my brains trying to implement this specific functionality in the UI using a combination of HTML5, Bootstrap, CSS, and JavaScript. My goal is to create dropdown menus in the UI by parsing JSON input data. Please Note: The keys withi ...

javascripthtmljsondynamicdropdown

"PHP MySQL news error" - An unexpected error occurred

Just incorporated a news system using MySQL/PHP, it functions flawlessly; however, encounters errors when inserting HTML. For instance, inserting a YouTube video results in the addition of / or \ Can someone advise on what changes need to be made in ...

phpmysqlhtml

Is there a way to convert a URL into a user-friendly json format displayed on a web page

Can someone please help me figure out the proper way to convert this URL into a JSON format that is easily readable using jQuery on an HTML page? ...

javascriptjqueryhtmljsonparsing