Displayed below are three screenshots of identical code, highlighting the variation between them.
https://i.sstatic.net/ON3Af.png https://i.sstatic.net/QqJLw.png https://i.sstatic.net/rd2em.png
Here is the reference code:
<ul>
<li>num 1</li>
<ul>
<li>num 1.1</li>
<li>num 1.2</li>
<ul>
<li>3rd level</li>
</ul>
</ul>
<li>num 2</li>
</ul>
The varying screenshots raise questions, perhaps driven by different factors that contribute to these differences.
It appears that there is an issue in your HTML code. Nesting a ul inside another ul is not valid. The correct syntax should be:
<ul>
<li>Item 1
<ul>
<li>Sub-item 1.1</li>
<li>Sub-item 1.2
<ul>
<li>3rd level</li>
</ul>
</li>
</ul>
</li>
<li>Item 2</li>
</ul>
Make sure to close each li tag at the end of its respective list item, including its sub-items.
By using a CSS reset, it should help ensure that the display is consistent across different browsers (with some minor variations).
When it comes to managing vertical space, CSS offers control through the line-height property. An example of this would be:
li { line-height: 40px; }
If you're looking for more information on styling lists with CSS attributes, you might find this article helpful.
EDIT:
In relation to your revised query, horizontal spacing can be managed using the margin-left property. Here's an example:
<ul>
<li>item 1
<ul>
<li>sub-item 1.1</li>
<li>sub-item 1.2
<ul>
<li>3rd level</li>
</ul>
</li>
</ul>
</li>
<li>item 2</li>
</ul>
By applying the following CSS rule:
li ul li { margin-left:100px; }
You'll create a 100px right margin for lists that are one or more levels deep. Check out how it looks here.
My typical approach in CSS is to disable margin, padding, and line-height for li, ul, ol. While most browsers may use margins by default, I prefer to explicitly set them to 0 for consistency.
ul, ol, li {
padding: 0;
margin: 0;
line-height: 0;
}
The method to add spacing depends on your preference. Options include using top/bottom margin or padding. For this scenario, I recommend utilizing margin:
li {
margin: 5px 10px 5px 1em;
}
Additionally, it's important to implement a reset class in order to standardize the display across various browsers.
I am working with an HTML table that has dynamically created rows and columns using AngularJS. I want to add an option where users can hover over a row or column and see a delete button icon that, when clicked, will remove that row or column. While this fu ...
I have encountered a strange issue while trying to create a custom template for WordPress. The index.php file is working perfectly fine - all elements load without any issues. Here is the code in index.php: <?php get_header(); ?> <?php if ( is_ ...
Having difficulty aligning a button to the right using float: right; No matter what I try, the button with the "advanced-search-button" class refuses to move to the right. This issue is occurring in Bootstrap 4. HTML <link href="https://maxcdn. ...
Below is the code I'm currently working on to generate a carousel: <section id="slider"> <div id="landing-page-carousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carou ...
Each row in the table contains a button with the unique identifier of the element. Clicking on the button will populate the form with the corresponding data. I suspect that there is an issue with the renderer, as it clears the form and I'm unsure how ...
I am currently working on a section that functions like jQuery tabs, but instead of requiring a click to activate, I want it to work on mouse hover. The current implementation is somewhat buggy - when hovering over a specific section, it displays as expe ...
I have integrated the highcharts.js library into my website to create a profit & loss chart. The values for this chart are obtained from an array that is populated through an ajax response from my server. Below is the code snippet: <script type="text/ ...
Is there a way to utilize jQuery to determine the file size of a PDF that is linked to a webpage? I am looking to create a feature where, upon hovering over the download link, a modal box displays indicating the file size of the PDF. I have the second par ...
I've been trying to design a navbar using Bootstrap, with the 'navbar-brand' on the left, centering the navbar items in the middle, and having two items on the right. Initially, I attempted to create it from scratch but struggled to make it ...
I am trying to achieve a specific effect where the text is uppercase only on the selected option within a <select> element. I came across a solution using jQuery in this article, but I need to convert it to plain JavaScript (vanilla JS). I have made ...
I have implemented Angular grid to create a fluid layout of items on my page, similar to Pinterest. While it generally works well, I am encountering an issue where there is empty space in some cases because the position of item7 seems to be calculated inco ...
Is there a specific location in my PHP code where I should place a for loop in order to loop through dates in the database? Take a look at this snippet: <script> $(document).ready(function() { $('#calendar').fullCalendar({ d ...
I am working with a list of objects and my goal is to iterate over the list. I need to extract a specific property (string) from each object and store it in a map with boolean values. Below is the code snippet that I have written: this.selectedPeople.forEa ...
I'm looking for something similar to this. However, I need it to appear next to the input fields instead of below them. The code I currently have displays the input fields but they are not on the same line. How can I achieve that? <div class="form ...
I seem to be facing an issue with creating responsive images using Bootstrap 4. Whenever I view the code below on a browser, I see three images in the navbar at the top left corner. Unfortunately, these images do not scale down in size when viewed on mobil ...
I am in the process of developing a Flask application where users are required to input a list of floating-point numbers. The current method I have implemented appears as follows: times = request.form.get("FORMNAME") if not times: ret ...
Is there a way to align the asterisk symbol with the text and adjust the positioning of the Yes and No elements as depicted in the image? https://i.sstatic.net/mCsUG.png Check out this fiddle: https://jsfiddle.net/07bd0hda/ and snippet below: <div ...
I'm having trouble finding a solution to keep the top navigation bar fixed at the top of the screen without allowing it to scroll when the page becomes too long. I want to prevent the top nav bar from scrolling and maintain its position at the top of ...
I am currently working with an API and attempting to access a nested object within the JSON data named "Species Illustration Photo". Inside this object is an "img" property with the source link. How can I display this nested img source in my HTML using Vue ...
Here is a sample JSON data: [ { "componentid": 4, "displayImageUrl": "https://via.placeholder.com/350x200", "title": "theme", "shortdesc": "to set theme for different applications" }, { "componentid": ...