I am looking for a way to display lists in a document with a style similar to the image on the right below:
The text content of the list items is formatted like any other <p> and the bullet points are located in the margin.
Is there a CSS solution available for this type of styling?
div {
padding: 5px 50px;
}
ul {
padding-left: 0;
}<div>
<p>Lorem ipsum dolor sit amet.</p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<p>Lorem ipsum dolor sit amet.</p>
</div>To see if this will work, run the code snippet and check it out:
Ensure that the body has the same font-size as the list elements to maintain consistent line height:
body{ font-size:20px;}
.no_bullet:first-of-type{
margin-bottom:-20px
}
.no_bullet:last-of-type{
margin-top:-20px
}<ul class="no_bullet">
any header
</ul>
<ul>
<li>
Lorem ipsum dolor sit amet, ius postea pertinacia ex, usu ea forensibus interesset, vis modo veniam an. Has suas probo vituperata ea. Inermis eligendi per at, ut purto prodesset usu. Vel in stet oporteat senserit. Ius id populo latine neglegentur, cum te homero malorum molestie.
Vis delenit alienum an, cu movet officiis sed. Vis ipsum commune ei, his ei partem accusam molestiae, paulo indoctum interpretaris ei mea. Unum accusata ea vis, mea ipsum falli conclusionemque eu, at vim mutat eirmod salutatus. Et aeque disputando est. Ius falli numquam mentitum in, mei ex novum eirmod, pri deserunt reprehendunt ad.
</li>
<li>bla</li>
<li>gla</li>
</ul>
<ul class="no_bullet">
any footer
</ul>If you want to remove the padding on a list item, you don't have to use the Padding property. Instead, simply create a new class and set list-style:none. This will eliminate the default padding/margin for all list items (li).
Take a look at the example below:
li.nolist{
list-style:none;
}<div>
<ul>
<li class="nolist">What is Lorem Ipsum?</li>
<li>Lorem Ipsum is not simply random text. </li>
<li>Lorem Ipsum is not simply random text. </li>
<li>Lorem Ipsum is not simply random text. </li>
<li class="nolist">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
</ul>
</div>Seeking assistance with implementing mat-icon-button matSuffix in Angular for a login page. This is my first time working with Angular and I am facing an issue with the password field. I have used mat-icon-button matSuffix, but whenever I click on the ico ...
I am attempting to add "contacts" to local storage, and every time I add a new contact I want to refresh it in a jQuery list. I have successfully achieved this without using local storage. However, now I am facing a problem that I can't seem to solve. ...
I am utilizing a load more button to display content fetched from a database via ajax. Here is how the ajax call is structured: // JavaScript Document // Function to load more builds $(document).ready(function(){ var pageIndex = 1; $('#loadmorebuild ...
I am looking for recommendations on libraries that can help me save HTML documents in memory as Word .DOC files. Any suggestions for both closed and open source options are welcome. Additionally, could someone provide links to these libraries based on the ...
I've searched for answers but haven't found anything that works for me. I'm looking to have 2 rows of 6 elements at the bottom of the page and have them stick there as the page scrolls. I tried using a table, which almost worked. .center ...
I have developed a contact form using HTML5, Bootstrap, and jQuery. The form includes hidden fields that are only displayed when the user selects a radio button. I have implemented validation to ensure that the hidden fields are not required to be filled o ...
In my current project, I have implemented a feature where shapes are generated by spinning the mouse wheel. One specific shape in focus is the triangle, but other shapes follow the same generation process. The goal is to create a trail that slowly fades ...
I am looking to create a button with an image X that, when clicked, will delete a row from the database at that exact moment. teste-checkbox.php <style> table { font-family: verdana; font-size: 12px; } table th { text-align: left; backgrou ...
I have a Bootstrap row and I'm attempting to center some text vertically, but it's only centered horizontally. Current Layout: https://i.sstatic.net/XcqHi.png Desired Layout: https://i.sstatic.net/ZegKG.png The second image shows the phrase "c ...
I'm attempting to create a layout where divs are displayed from top to bottom, but once they reach the bottom of the browser window, any additional divs will overflow to the right. You can take a look at the desired layout here: https://i.stack.imgur. ...
Encountering a strange issue was the order of the day, as I found myself faced with an unordered list featuring a background image in the form of a semi-transparent PNG. To my surprise, the transparency only became visible once I designated the unordered l ...
Back in the day, I learned how to create a website by enclosing all content below the body tag within a div with the class "wrapper." This approach made sense as it allowed for easy vertical and horizontal alignment of the entire content. Just yesterday, ...
Here is a jQuery code snippet: $(document).ready(function () { $(".story-area > h1, .story-area > p, .story-area > div > p").text(function () { return convertString($(this).text()); }); }); Additionally, there is a function de ...
I'm currently developing a project that involves displaying speech bubbles next to each list item when hovered over. These speech bubbles contain relevant information specific to the item being hovered on. To achieve this functionality, I've crea ...
Currently, I am in the process of developing the front-end for a shopping cart. To organize the content, I have split the container into two columns using Grid container and Grid item. In each column, various components are placed - the left side containin ...
When trying to display a certain password pattern using regex while typing in the fields, I encountered a problem. The onkeyup() function works for checking if both passwords match, but it causes the pattern info box not to appear anymore. I'm curiou ...
When we POST an AJAX request to a server running locally, the code looks like this: xhr.open("POST", "http://localhost:9000/context/request"); xhr.addHeader(someCustomHeaders); xhr.send(someData); The webpage where this javascript is executed is also on ...
Looking for assistance with a 10 loading dots animation script. I'm trying to customize the color of each dot individually, but when I create separate divs for each dot and control their colors in CSS, it causes issues with the animation. If anyone ...
Is it possible to change the background of the page when an option is selected from a dropdown menu? Additionally, can this be achieved with a smooth fade in and fade out animation? Here is a code example on CodePen. body ...
I am facing an issue with positioning the logo in the header section of my website. It appears correctly on the left side for tablet and mobile versions, but on desktop, it does not align to the corner as desired. I tried adding a right margin, but I belie ...