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>I was attempting to set up a tokenfield on a textarea with increased height, but it is showing up as a single-line textbox. How can I modify the tokenfield to function properly with a textarea? <textarea name="f1_email" placeholder="Enter Friends' ...
Currently, I am working with an ASP.Net 4.5 website that incorporates a master page. The site utilizes a CSS file that is applied universally across all pages. Recently, I added a new page to the website which contains its own custom CSS specifically desig ...
Is there a way to dynamically change content on a page when a checkbox is checked, and revert it back when the checkbox is unchecked? I don't want to manually set each element's value to default in JavaScript and CSS. <div class="switch&q ...
Looking to create a 100px by 100px image in Inkscape with major lines every 100px and minor lines every 10px. This will help verify viewport size when used as a repeating background. What's the best approach for this? Thinking of using #888888 for ma ...
I have a dynamically rendered DataTable from https://datatables.net. I implemented an on-click event for the rows based on this tutorial: https://datatables.net/examples/advanced_init/events_live.html In the row, there is a select box that I excluded by ...
Hey there! I'm currently working on designing a website header using bootstrap 3, which consists of four main divs. Within each of these divs, there are two nested divs. Imagine one of the initial divs as shown below: _______________________________ ...
I am relatively new to the React environment and recently created a basic component for a bookmarking feature. Essentially, when the favourite icon is clicked, an ajax call is sent > a record is created in the database > on ajax success, a flash me ...
Can anyone help me figure out how to vertically center text that can be one or two lines long? The text also has a specific line-height set. I attempted the solution provided in this link but it didn't produce the desired result: <div> < ...
I'm in the process of recreating a simple navigation menu and I've reached the section where I am encountering an issue with the list items. The orange li element is not filling up 100% of the width, and I also need the links to align in the midd ...
Currently in the process of constructing a website using SASS coding, I have created several @mixins for Media Queries that will be utilized later with the @include directive. The structure of these mixins is as follows: _standards.sass // Media queries @ ...
Is there a way to make only one th span the full width of the table, even with 5 columns below? I want to color the background of the th to cover the entire width. However, since the rest of the table contains 5 columns, the single th only stretches acros ...
I am facing a challenge while attempting to implement a Wordpress template on one of the pages of my website, specifically at http://www.windowblindshadeshutters.com/blog/. The blog has been successfully created, however, I am having trouble preserving our ...
Is it possible to adjust the size of a <path> to fit a specific px dimension by simply altering the attributes of the path itself? Within an SVG, I have a carrot symbol represented by a <path>. <svg height="600" width="400"> <p ...
I have a question about image rendering. What occurs when we try to fit a large image into a small container? Consider, for example, creating an HTML page with a 100x100 px image on a device with a pixel ratio of 2. Situation 1: Placing the image inside a ...
Let's start with some context. Our primary sass file is named main.scss, which mainly imports other scss files. /* ========================================================================== Base ================ ...
Seeking assistance on centering the hamburger icon on my sidebar. Currently, when I adjust the width of the sidebar, the icon is not centered at all. Does anyone have a solution for achieving this? I attempted using justify-content: center in the main clas ...
Currently in the process of creating a custom Wordpress theme and seeking guidance on implementation. You can view the design outline here. Planning to utilize 960.gs for the css layout. My main concern is how to approach the services section (1, 2, 3...) ...
I'm excited to ask my first question here as a beginner. I am truly grateful for all the assistance and guidance I have received from this site. I hope that the questions I ask can also benefit others in some way :) Although imagemaps may not be used ...
This is my unique gallery display: https://i.stack.imgur.com/RddD8.png Here is the look I am going for https://i.stack.imgur.com/kuOye.png I want to showcase images in a slightly messy yet awesome way However, I encounter an issue when some images have ...
Imagine the following scenario: @media only screen and (max-width: 600px) { nav { display: none; } } @media only screen and (min-width: 601px) { nav { display: block; } } This setup can lead to undefined behavior for a wid ...