Recently, I encountered a peculiar situation while working with floating images in a document. It seems that the list items indentation is being determined by the 'red line' rather than the expected 'green' one.
I'm puzzled as to why this is happening and if there is a way to fix it?
<img style="float: left">
<p>some text</p>
<ul>
<li>aaa</li
<li>bbb</li
</ul>
<p>some other text</p>
To solve the issue, simply include
ul { list-style-position: inside; }My suggestion would be to possibly consider adjusting the positioning of the list style to inside.
Here is a combination of information I gathered to successfully implement this solution.
Code Snippet - HTML:
<div>
<img src="bleh.jpg">
<ul>
<li>This is a test of something with something to do something</li>
<li>This is a test of something with something to do something</li>
<li>This is a test of something with something to do something</li>
</ul>
</div>
Code Snippet - LESS:
img {
float: left;
}
ul {
list-style-position: inside;
li {
position: relative;
left: 1em;
margin-bottom: 1em; margin-left: -1em;
padding-left: 1em;
text-indent: -1em;
}
}
I found the solution that worked for me at this source:
For browsers like Chrome and Firefox:
ul { list-style-position:inside; margin-left: 2px; display: table; }
ul li {margin-left: 13px; text-indent: -12px; }
And for Internet Explorer:
<!--[if IE]>
<style>ul li {margin-left: 19px; text-indent: -18px; }</style>
<![endif]-->
When styling the ul element, remember to use overflow: hidden; to give it a box-like appearance instead of just plain text, and padding-left: 1em; to create space from the left side.
.image {
float: left;
width: 50%;
height: 200px;
background-color: gray;
margin-right: 20px;
margin-bottom: 20px;
}
ul {
padding-left: 1em;
overflow: hidden;
}<div class="image"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales sodales facilisis. Ut a risus vitae massa scelerisque elementum. Quisque finibus posuere tempus. Suspendisse rutrum quam faucibus, tincidunt neque vitae, porttitor urna.
</p>
<ul>
<li>Nunc vulputate libero vel molestie dapibus.</li>
<li>Proin pellentesque orci rutrum erat iaculis, eu porttitor lectus congue.</li>
<li>Morbi neque arcu, congue posuere vestibulum ac, pulvinar nec lectus. Aenean nulla magna, elementum ut leo vel, tincidunt finibus enim. Aliquam pretium justo et lectus malesuada vestibulum at non tellus.</li>
<li>Nunc vulputate libero vel molestie dapibus.</li>
<li>Proin pellentesque orci rutrum erat iaculis, eu porttitor lectus congue.</li>
</ul>
<p>
Nunc vulputate libero vel molestie dapibus. Proin pellentesque orci rutrum erat iaculis, eu porttitor lectus congue. Curabitur ut tincidunt justo, nec mattis diam. Praesent suscipit scelerisque enim, at aliquet diam accumsan ut. Morbi neque arcu, congue posuere vestibulum ac, pulvinar nec lectus. Aenean nulla magna, elementum ut leo vel, tincidunt finibus enim. Aliquam pretium justo et lectus malesuada vestibulum at non tellus. Etiam vel libero scelerisque, bibendum massa sit amet, fringilla odio. Nam eu sem massa.
</p>Looking for a way to properly display user inputted text in Unicode based on its general direction, rather than defaulting to left-to-right. An issue arises when dealing with Arabic text as shown below, where the English word (4th) is split apart: اُر ...
Greetings, I trust everyone is doing well. I am in need of some assistance from your brilliant minds. I have a circular div along with three CSS classes, and my objective is to switch the div's class and update the label text every 3 seconds. Any insi ...
Encountering difficulties in achieving a visually pleasing document using knitr's export to pdf, I have resorted to converting the html file for my Markdown project to pdf through the wkhtmltopdf command line utility tool. A simplified Markdown docum ...
When visiting http://tadris3.ir/, one may notice a peculiar space on the left side of all pages. Can anyone assist in resolving this bothersome issue? ...
When reviewing the Bootstrap 5.2 validation documentation, https://getbootstrap.com/docs/5.2/forms/validation/ "It has come to our attention that the client-side custom validation styles and tooltips are not accessible at this time, as they are not ...
Is there anyone who can assist me in constructing this happy face? ...
Is there a way to create tilted drivers with borders and text without sacrificing the sharpness of the font and border? I have used the transform: skew(); CSS rule for tilting, but it has caused blurriness. How can I add font smoothing and maintain sharp b ...
Hey there! I need some assistance in completing this code snippet. I have a div with overflow:hidden and a margin-left of 82px. Inside it, there is a share link and a ul list containing three external links. When I hover over the share link, everything w ...
As a newcomer to using Bootstrap, I recently created a webpage with Bootstrap3. However, I encountered an issue when trying to apply two classes to the same element, as the CSS was not being applied: Here is the HTML code snippet: <div class="col-md-4 ...
When creating a Shopify theme for a client, I encountered an issue with the layout of my liquid file. Specifically, when using the text-first layout, the image in the image-with-text div is partially hidden due to the content that follows it causing the he ...
When I set the width of my google map canvas to 80%, the map itself fills that percentage but leaves a wide space to the right of the canvas, taking up the remaining 20% of the screen. This creates an issue because my div cannot be placed in that space. ...
Hey there! I am trying to figure out a way to stack list items containing images on top of each other, like a deck of cards, but without resorting to absolute positioning. I attempted to do it using absolute positioning, here's what I came up with: ...
I've inserted an SVG using an img tag. When hovering over it, I want the fill color of the SVG to change. I attempted to convert the SVG to inline SVG following this method, but it doesn't seem to be working as expected. No console errors are b ...
In my React Native project, I'm currently working with 2 inline buttons - the search and add buttons: https://i.stack.imgur.com/tKZrf.png I'm looking to add some spacing between these buttons without impacting their alignment with the left and ...
I have a parent container with a unique background color. Inside the parent container, there is an unordered list (ul) with multiple list items (li), each having a distinct color and a brighter border color. Now, I am looking to extract the border color of ...
Issue I am facing a challenge with integrating angular material SCSS into my application. I want to ensure that these styles are isolated and scoped specifically for my application, as it will be embedded within a larger monolith. The goal is to prevent a ...
Currently, I am working on a checkers project where the first step is to create the initial board. The way we are currently implementing this has raised a philosophical concern. We are using the fillRect function to define the color of the "dark" squares a ...
I have implemented a comment system using ajax that is functioning well. I am looking to incorporate an ajax/js code to automatically refresh my "time ago" div every 5 seconds so that the time updates while users are viewing the same post. Important note: ...
After trying several guides on creating sub-menus, some involving JS, I decided to attempt a CSS-only approach. Unfortunately, I have encountered difficulty in making the submenu function correctly. You can view my code on fiddle here: http://jsfiddle.net ...
I've been attempting to dynamically change the CSS file, but I've run into an issue: Whenever I try to alter the style, it seems to work correctly while in "debug mode", showing that the changes are applied. However, once the JavaScript function ...