Unordered list: none" alongside "Inline-block display

Is it acceptable to omit "list-style: none" when creating a horizontal navigation bar, as setting "display: inline-block" causes the bullet point itself to disappear? If not, explain why.

HTML:

        <nav>
            <ul class="horizontal-list">
                <li><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#skill">Skills</a></li>
                <li><a href="#experience">Experience</a></li>
                <li><a href="#Education">Education</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>

CSS:

nav li{
    /* Do I really need list-style:none in this situation? */
    margin:15px 15px;
    color: white;
    display:inline-block;
}

Answer №1

Should you find that the attributes you've selected aren't making any visual impact, it may be time to consider semantics and accessibility.

Evidently, Safari encounters difficulties with list-style:none. These styles are not incorporated into the accessibility tree, potentially leading to issues when content is read using screen readers. Here's a suggested workaround provided in the linked resource:

ul {
  list-style: none;
}

ul li::before {
  content: "\200B";
}

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

Adjusting the height of an element in AngularJS based on its width dynamically

I am working on a table that is generated using ng-repeat, and I want to ensure that each td in the tbody is square. Since all the tds have an equal width, I only need to adjust the first one. However, the size of the table and td will change when the wind ...

The concepts of width and min-width in CSS allow for controlling

I have a table with the following styles applied: width: auto; min-width: 98.5%; When viewing in Chrome, the table inside a div appears to only be about 50% of the width of the containing div. However, in IE9, the table occupies the full width. Checking ...

aligning an icon in the middle of its container

I'm having trouble centering an icon vertically inside its box only. I've tried using vertical-align: middle; but it doesn't seem to be working. I also attempted the line-height method, but the icon has an outer border that stays attached to ...

Troubleshooting Problem with React Slider: Inability to Display Images and Previous Button

I'm currently grappling with a React issue after following a tutorial on YouTube. I've been working in CodeSandbox and have encountered a problem where the images and previous button are not displaying as expected. Despite my efforts to debug, th ...

Utilizing Selenium to scrape various URLs for similar content using subtly different XPaths

Utilizing Selenium to retrieve data from various URLs, each containing similar tables but with slightly different XPaths. See below for my code snippet: my_urls = ["https://www.sec.gov/cgi-bin/own-disp?action=getowner&CIK=0001548760", "https://www.sec.gov ...

Utilizing an array of font styles in a single line while maintaining a consistent width

I am creating a simple webpage with fixed width text. Check out this sample HTML: <div id ="wrap"> <h1>An Annoying Heading</h1> <p>Some text some text some text some text some text some text some text some text some text so ...

[Web Development]:

Having an issue with my HTML file where a JavaScript function named "CheckCaptcha" is not being executed when an image is clicked. I've been working on the code for hours, trying different tweaks and modifications, but it still can't seem to find ...

Jquery display function experiencing unresponsiveness

Currently, I am trying to implement some show/hide functionality in my JavaScript file: $(document).ready(function() { $('#me').hide(); $('#send').click(function() { $('#me').show("slow"); }); }); Strange ...

Dragging a div with padding enabled

After implementing an innovative AngularJS directive to enable element dragging, I decided to apply it to a div element that will serve as a floating menu on my website. A curious issue arises when I attempt to drag a draggable div that is nested within a ...

The background image in the hovering textbox shifts and changes size

I've been trying to set a background image on a Kendo UI Textbox. It looks good until you hover over it. But when you do hover over it, this issue arises: How can I resolve this? The background image should remain in place even when I hover and cli ...

Display Information in Tooltip Using Text from a Different Source

I'm seeking a way to create tooltips on a webpage that provide definitions for specific words. However, these definitions are located on a separate page within the same website. Is it possible for me to extract the text I need to display in the toolti ...

How can I create a black border around an input button in the OPERA browser

List item Why does a black box appear around the input button in Opera? Check out the jsfiddle link for reference: http://jsfiddle.net/PKRRj/ Give it a try by clicking on the button. Test it in Opera, as there are no issues with other browsers. Here is ...

Navigate to the top of the page using jQuery

Attempting to implement a simple "scroll jump to target" functionality. I've managed to set it up for all parts except the "scroll to top". The jumping works based on the tag's id, so it navigates well everywhere else, but not to the very top. He ...

The default appearance of bootstrap-select appears to be flawed

Utilizing the amazing Bootstrap-select jQuery plugin has brought two unexpected default styles to my selectboxes. Despite inserting the necessary CSS and JS files into my website, all select boxes are displaying with these peculiar default settings (withou ...

Use jQuery to display the user input value in real-time

I am in the process of developing a dynamic calculation program to sharpen my jQuery skills, but unfortunately, I'm facing some challenges. I have managed to store values in variables as shown in the code snippet below. <form> Table of: ...

Is there a way to access the badge hidden behind the collapsible menu in bootstrap 4?

After moving from bootstrap 3 to bootstrap 4, my items no longer align properly. I've scoured the entire Internet for a solution, but I've run out of options (and patience.. haha) This is how it currently looks: https://i.sstatic.net/ra22j.png ...

Issue with retrieving elements by tag name

I'm currently working on a project where I need to parse an HTML file and display specific parts on the webpage. I've managed to read in the file using AJAX and requestData.js file successfully, as I can alert out the whole page using the html va ...

Is there a way to align an image (flag) horizontally with some text on the same line?

I have a question - how can I align an image (specifically a flag) with text on the same line? Take a look at the image for reference. https://i.sstatic.net/8HzvF.png This is the HTML code I currently have: <h4> <img src="https://upload.wikimed ...

What causes performance issues when utilizing mouseover events in JQuery?

var mouseX; var mouseY; $(document).mousemove( function(e) { mouseX = e.pageX; mouseY = e.pageY; }); $(".test").mouseover(function(){ $('#DivToShow').css({'top':mouseY,'left':mouseX, 'display':'block&ap ...

What is the best way to insert a row into a JavaScript table while incorporating a cell that utilizes the datepicker function in jQuery?

Currently, I am working on a javascript function: function addItem(tableID){ var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell1 = row.insertCell(0); var el ...