Styling list items within an unordered list using CSS

Currently working on a website and encountered an issue:

<li> tags are not nested within <ul>

https://i.sstatic.net/DmP3U.png

#category_select {
  margin: 0 auto;
  width: 97%;
  height: 50%;
  list-style: none;
  text-align: center;
  border: 1px solid black;
}
#category_select li {
  display: inline;
  padding: 10px;
  border: 1px solid black;
}
<ul id="category_select">
  <li>Home</li>
  <li>Electronics</li>
  <li>Appliances</li>
  <li>Vehicles</li>
  <li>Sports</li>
  <li>Home&Garden</li>
  <li>Clothing & Footwear</li>
  <li>Fashion</li>
  <li>Literature</li>
  <li>Handicrafts</li>
  <li>Toys</li>
  <li>About Us</li>
  <li>Contact</li>
</ul>

Answer №1

Give this solution a shot

#category_select li {
    display: inline-block; //update display:inline to display:inline-block
    padding:10px;
    border:1px solid black;
}

Check out the DEMO here

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

Having trouble with jQuery's find() function not working in conjunction with prev()?

I'm in need of some assistance because I think I may be approaching this the wrong way. Here is a link to the jsfiddle I have created: https://jsfiddle.net/m35o8jjL/2/ Below is the HTML code snippet: $( ".layered_subtitle_heading" ).click(function ...

Jquery Parallax Scrolling - Dynamic Multi-Directional Effect

My client is looking for a multi-directional JQuery parallax page, similar to this example - I have the necessary artwork and discovered various jQuery libraries that support horizontal and vertical scrolling separately. However, I am struggling with comb ...

Is it possible to include ternary in the "homepage" section of the package.json file?

When making API calls in production, they will be on the same domain as where my app is hosted, so it's necessary to include "homepage": "." in the package.json. However, when working locally from localhost, I need to make API calls to the production ...

Guide to swapping images based on conditions using Angular JS

I am trying to display an image based on data received from an API response instead of text. If the value is true, I want to show an access symbol. If the value is false, I want to show a deny symbol. However, when attempting this, I am only getting th ...

Combining LESS with cultural designations

Currently working on a multi-lingual website project and facing the challenge of switching out CSS based on different languages. I am passing the culture code into the page and exploring ways to use it to reference specific selectors for each language. H ...

Attempting to incorporate real-time search functionality into an input field

Looking to incorporate live search functionality in a text box, with the options being fetched from the server. If an item is not available, it should be added dynamically. For example, if typing "gre" and selecting that word, it should automatically be ad ...

Creating the Modal Window Effect using CSS

My goal is to create a modal window using CSS. I am working on adding a stylish element for users who have JavaScript disabled, which will be displayed using the noscript tag. Here is what I currently have: <div id="ns-overlay"> <section ...

retrieving data from a database to populate selection options using PHP

While working on our thesis, I encountered a challenge where I needed to transfer certain values from my SQL database to another part of the project. Below is a snippet of the sample code I was using: <tr> <td id="t" align="center"> ...

Button halts the playback of numerous audio tracks simultaneously

I'm in the process of creating a Launchpad, where each row consists of 8 buttons/audio tracks and a stop button. My goal is for each stop button to halt all audio playing on that specific row when pressed—for instance, pressing Stop Button 1 would c ...

Proper syntax for jQuery's insertAfter() method when using selectors

I am working with a div <div id="imgDIV"><h4>My Debug DIV</h4></div> and I am trying to add a debug message at the top of the div, right after the first h4. This way, my most recent messages will be displayed at the top. $(' ...

Is there a way to adjust the slide length in JQuery's slideUp function using pixels? It seems like

At the bottom of a page, I have a fixed position div element. There is another div below it, but it is hidden outside of the page margins. I am attempting to slide both divs upwards so that the bottom one becomes visible (moving out of the margin). However ...

What is the best way to increase the size of an image within a card and minimize the amount of white space

I have a card featuring an image, accompanied by a banner placed next to it. To structure this layout, I am using col-lg-8 for the card and col-lg-4 for the banner. However, I'm facing an issue with excessive white space between the card (which has a ...

Is there a way to control the visibility of two divs depending on which one a user hovers on?

Having two stacked div elements containing images, I want the div with id = "features3_HDS_image" to become visible when a user hovers over the div with id = "HDS_Blurb", and the div with id = "features3_FH_image" to be displayed when hovering over the div ...

Updating a view based on a value entered prior to submitting the form in MVC/C# - a complete guide

I'm working on a simple view that displays start and end dates. My goal is to show a "Half Day" checkbox only if the start date matches the end date. So far, I've attempted to implement this feature, but the view isn't refreshing as desired ...

Tips for creating a full-screen asp website

I'm looking to develop a fresh website that showcases all pages in full screen mode, with the ability for users to access the desktop view only by entering a specific password. My initial thought is to design it as a single page, but I'm open to ...

"Enhancing user experience with CSS hover effects on dynamically loaded content and mobile devices

I have developed a quiz with 2 answer options for each question. To prevent the questions from loading initially, visitors must click a start button, triggering the questions to load via Ajax. The issue I am facing is that when a question is answered, the ...

Transforming a diamond shape to be responsive with content aligned to the center using rotate transform

Struggling to create a responsive diamond shape in the middle of a container with a centered logo? Here's what I mean: (images are self-drawn graphics) I've successfully made the diamond shape responsive and centered using this code: .cover-di ...

Adjust the size of horizontal <li> elements dynamically to keep them in a single row

I've been trying to set up a 'gallery' section on one of my pages, with three elements featured. However, I'm running into an issue where resizing the window or viewing on a smaller screen could cause overlaps or force a second row with ...

retrieve the position of a descendant element in relation to its ancestor element

I'm encountering a challenge while attempting to solve this issue. I have elements representing a child, parent, and grandparent. My goal is to determine the offset position of the child (positioned absolutely) in relation to the grandparent. However, ...

Certain information has not been included in the MySQL database

In this section, I have the PHP code for establishing a connection and inserting data into the database. tfs.php :- <?php require "init.php"; $fsname = $_POST['fsname']; $lsname =$_POST['lsname']; $contact =$_POST['conta ...