Creating a horizontal list using simple CSS techniques

Looking for some help with coding a horizontal list for a new website project. Can anyone review my code and help me identify any errors?

<!doctype html> 
<html>
<head>
    <title>My Website</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
            .menubar {  
                list-style:none;
                float:left;
                border-left:1px solid; 
                display:inline;}
        .numbers {
            display:inline;
            list-style-position:}           
    </style>
</head>

<body>
    <div id="container">
        <div class="whitebar"></div>
        <div class="fixedwidth"></div>
        <div id="home"></div>
    </div>
    <div class="redbar"> List   </div>
    <div>
        <ul class="menubar">
            <li> Home </li>
            <li> Video</li>
            <li> World </li>
            <li> US & Canada </li>
            <li> UK </li>
        </ul>
    </div>
</body>

Answer №1

To ensure proper styling, it is recommended to include the class="numbers" attribute in all li elements. Alternatively, a new class such as menu-item could be created with CSS properties like display: inline; or display: inline-block;.

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

I'm looking to position the vibrant red box at the bottom of the screen, right under the navigation bar. However, every time I try to

I'm struggling to align the full-screen red box under the navigation bar. I've tried using flex properties but it's not working as expected. My goal is to have the red box at 100% width and be responsive. Could it be something with my nav b ...

Expanding a CSS div when the content wraps on smaller screens

When viewing the menu on standard screens, everything looks good. However, on smaller screens, the menu items start to wrap which is fine. The only issue is that the containing div #nav does not automatically enlarge along with it. I would like for the div ...

Aligning an image vertically within a division

I am currently working on aligning images vertically within an image rotator (SlideDeck). At the moment, all the images are aligned at the top but I need them to be centered. The heights of the images vary. I have tried several methods, including absolute ...

Experience the ultimate in slider automation with the cutting-edge power of

Here is an example of a website plugin I used on my site. You can check it out by clicking here. However, I'm having trouble automating the events that occur when the item slider is clicked. I would like to make these events happen automatically with ...

Animating CSS transformations with rotation

Explore the World of HTML and CSS <div id="section1"> <div id="box1">WELCOME</div> </div> <div id="section2"> <div id="box2">WELCOME</div> </div> CSS Styles for Transformation #section1 { position: r ...

Activate only the content of the parent div in a duplicated list using Javascript

Exploring the world of JavaScript, I am focusing on mastering event listeners and node lists. However, I have hit a roadblock when it comes to the JavaScript syntax for a specific query. My goal is to extract the innerHTML of each button and display it in ...

CSS - How can text and images be effectively combined for a visually appealing design?

We're tasked with designing text in the following format: Text in English XXX Text in English XXX Text in English. The XXX placeholders need to be replaced with images that have the same height as the English text. Is there a better solution for th ...

Launching an image link within the same location on the subsequent page to which it is directed

I'm completely new to creating websites so I may not be using the correct terminology. I've searched with various terms and ideas but haven't found any solutions to help me ask my question effectively or find examples of what I'm lookin ...

What are the steps to converting one grid to another solely with the use of Bootstrap utilities?

https://i.sstatic.net/SuGiM.png I am looking to convert the grid layout shown above into the grid layout displayed below. To achieve the above layout, I have used the following grid structure: <div className="row"> <div className=&q ...

The Responsiveness of Google Calendar

I currently run a WordPress website and have incorporated a Google calendar onto one of the pages. To ensure that the calendar is responsive on mobile devices, I am using the code below: .responsive-iframe-container { position: relative; padding-bottom: 5 ...

Extracting text using Python and Selenium

Having trouble extracting text from HTML using Selenium and Python innerHTML <span data-select="" data-selected="Selected" data-deselect="Press enter to remove" class="multiselect__option"><span>ONE</span></span> <!----> ...

unitary incline division assemblage

I noticed a particular element in the design that is currently displayed with an image (png). However, I am facing limitations due to needing to make it adaptive. Can a gradient be used as a sub-element instead? background-image: linear-gradient(to left, ...

Creating a perpetual loop animation for two divs moving from right to left endlessly

Here is the code I have: HTML <div class="screen screen1"></div> <div class="screen screen2"></div> CSS .screen{ width: 100%; height: 50%; position: absolute; background-color:#001; background-image: radial- ...

Dots are used to indicate overflow of title in React Material UI CardHeader

Is there a way to add ellipsis dots to the title in my Cardheader when it exceeds the parent's width (Card width)? Here is what I have attempted so far: card: { width: 275, display: "flex" }, overflowWithDots: { textOverflow: &apo ...

Adjust the text color based on the background image or color

Here on this site, I have designed the first div to display a dark image, while the second one shows a light background. I am aiming to adjust the sidebar text color based on whether it is displayed against the dark or light background. How can I achieve ...

Troubleshooting issue with applying hover effect to child divs

How come when I hover over one of the child items in my parentDiv, the background of the last childDiv changes no matter which child I place my mouse on? for (let i = 0; i < Number(height); i++) { for (let j = 0; j < Number(width); j++ ...

What is the significance of using flexGrow in the parent div of a Material UI grid?

I am currently working on understanding a code example located at https://codesandbox.io/s/9rvlm which originates from the Material UI documentation (https://material-ui.com/components/grid/): import React from 'react'; import PropTypes from &ap ...

Why are my AngularJs elements not appearing in the print dialog window?

Whenever I try to open the print Dialogue on a specific page, all I'm seeing is a blank screen. The majority of the content on this page consists of AngularJS elements. To trigger the print dialogue, I use the following code: <a href=""onclick="wi ...

Menu/navigation bar designed with floating lines and an array of color options

I'm currently working on implementing this specific menu into my Wordpress site. My main concern is figuring out how to customize the hover effect for each navigation item. Currently, the float line changes to red (background-color:#800; height:2px;) ...

Ensure that there are no automatic spaces between the texts entered in the input fields of an HTML CSS form

After designing an HTML CSS form, I incorporated JavaScript and jQuery for the website layout. However, I am encountering difficulty in adding spaces while inputting information on the contact form. You can locate the contact form at the bottom of this p ...