Check out this example to see the issue with the horizontal rule not extending all the way across under the number. I've tried using list-style-position:inside;, but that interferes with positioning the number correctly due to the left image being floated. Any suggestions for a CSS solution, or do I have to manually generate numbering and style it accordingly?
It appears that you are quite knowledgeable about the list-style-position property, which is why you understand why the horizontal rule does not extend all the way underneath the bullet or number. The padding on the left of the list is causing the list elements to be pushed to the right, keeping their contents within their designated space :).
To address this issue, I found a solution here: http://jsfiddle.net/J4b6Y/14/
[EDIT]
For webkit browsers, here is a fix: http://jsfiddle.net/J4b6Y/16/
[EDIT2]
This solution works in all browsers and even has valid HTML o_O http://jsfiddle.net/J4b6Y/37/
[EDIT3]
And yet another option... http://jsfiddle.net/J4b6Y/39/
UPDATE 4
It appears that Update 3 was successful on webkit but not in FF... time to harness the true power of CSS.
http://jsfiddle.net/J4b6Y/122/
UPDATE 3
What do you think about this?
http://jsfiddle.net/J4b6Y/105/
UPDATE 2
UPDATE
If it works for you, give this a try
My recommendation would be to eliminate the hr tag and the floating image properties.
If you are unable to utilize the image as a css background, consider the following approach:
HTML
<li>
<img src="" alt="test"/>
<p>Test</p>
</li>
CSS
li{
border-bottom:1px solid black;
list-style-position:inside;
}
li p{
display:inline-block;
}
Furthermore, by removing the p tag, you can save a few bytes in your code.
After reviewing the various responses to this question, it appears that while there may be methods to achieve this using CSS, an elegant solution is not readily available. In my opinion, I find it more effective to create the numbering within the HTML code and style it accordingly. This approach can be easily implemented when generating the page through server-side scripting.
I will continue to explore potential elegant solutions using CSS and will update this question if I come across any.
I have successfully used a <div style="margin:0 auto; "> tag with the specified property, working perfectly. However, I added another <div> above and set the float as follows: .gallery-div{ background:url(images/gallery-bg.png) repeat-y; ...
When you wish to navigate by scrolling with the middle mouse button instead of using the scroll wheel, simply middle-click and your cursor will change allowing for easy scrolling on web pages. Even though I am utilizing style="cursor: pointer" and @click. ...
Currently, I am following a course where I have implemented a simple login form inside the navigation bar: <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary"> <div class="container"> ...
I've created a form that allows users to add and remove multiple fields, ranging from one to three. My goal is to retrieve the form data and store it in an array. index.html <!DOCTYPE html> <html lang="en"> <head> ...
Is it possible for a (single-page) website to instruct a user's browser to save the entire page locally? To provide some background: I am running a website on a server that bills based on bandwidth usage. Since the content of the site remains mostly ...
I am encountering an issue when trying to integrate AngularJS/JavaScript into my HTML document. Each time I try to load my index.html file, the following error message appears: Resource interpreted as Script but transferred with MIME type text/html: "http ...
In my SVG checkbox design, I have a circle element surrounding a polyline element (which acts as the checkmark). The boundaries of the icon extend beyond the circle, causing hover styles to trigger even when hovering outside the circle. I want to change st ...
In my AngularJS application, I have implemented CSS animations for transitioning between states. The animations involve sliding content from left to right with specific timings and transforms. .content.ng-enter, .content.ng-leave { -webkit-animation-t ...
I have a setup using material UI where I have a grid positioned on top of a Paper element. Within the grid, there is a text input field in the first column that I want to match the height of the paper element and be aligned with its left border. I have tri ...
Every time I reopen the project, the file tailwind properties do not get rebuilt and if I add new properties like text-color, they are also not reflected. Any suggestions on how to solve this issue? I need the project to update and take in new properties ...
Currently utilizing "bootstrap": "~3.3.4" within the mean.js framework, I am facing an issue with the navbar dropdown menu. On desktop, everything functions as expected - the dropdown opens and remains open when the icon is clicked. However, once deployed ...
Currently working on freecodecamp's portfolio creation exercise. It should be a straightforward task, but I'm facing a small issue that's puzzling me. I'm trying to remove the border and outline (when focused) from my contact-area form ...
I recently completed coding a text adventure using functions like fgets(STDIN) that works in the command line. Now, I want to convert it to run on HTML (internet browser) but I'm facing a challenge. I am unsure how to transition from this: $choose=0; ...
Currently, I am working on a project where I need the submenu to adjust based on content. The issue is that right now, the submenu has a fixed capacity of 4 items. For example, when you click on 'sale', it displays 4 submenu items perfectly. Howe ...
I've been trying to adjust the font size of a mat-checkbox's label, but no matter what I do, the component's default styles keep overriding my changes: Using !important Trying ::ng-deep Applying a global style in styles.scss <mat-checkb ...
Would like to assign Layers Value as one of the following: GFS Meteogram 3day std or WRF 20 Global Meteogram 3day Std depending on the option selected from the dropdown menu <div><select id="myselect" class="productViewerParameter" name=" ...
I have an issue with resizing an image within a Bootstrap card using next/image. I am trying to decrease the size of the image to about 60% of its original size and prevent it from filling the entire top portion of the card. I attempted wrapping the imag ...
Looking to scrape data from this French website using Python and the bs4 library: the content is in french :) . Specifically interested in extracting all possible values of a multi-select search bar named 'TYPE DE BIENS'. This type of search bar ...
I have set up a main container, #main, for my page content with a central position. It is positioned absolutely to create some space above the container. Centering is achieved using negative margins and left:50% instead of margin:auto. However, the issue a ...
I am facing an issue with my booking flight form that is supposed to take input from users regarding the number of travelers. I have three textboxes for Adult, Children, and Infants respectively, along with a main textbox to display the final result. Howev ...