For my ordered list, I am attempting to indent the text by around 40-50px. This is what I have tried so far:
.shift{
margin-left: 40px;
padding-left: 30px;
}
<ol>
<li class="shift">
Initially I used margin, followed by padding, however neither seem to be working. Any suggestions on what to do next? Thank you!
Typically ol/ul elements have padding or margin values set to adjust the layout of items, so this
ol { padding:0; margin:0; }
ol > li{ margin-left: 40px; }
should provide the desired result.
To achieve indentation in CSS, you can use the text-indent property. However, this property cannot be applied to inline elements directly. To get around this limitation, you can wrap your text inside a block-level element such as a div or p, and then apply the text-indent property to that inner block element.
For example:
<ul>
<li>
<p style="text-indent: 10px;">text</p>
</li>
</ul>
If your HTML code is similar to the example provided below:
<div class="entry-content-wrapper">
<div>
<ol>
<li>Test One</li>
<li>Test Two</li>
<li>Test Three</li>
</ol>
</div>
</div>
After reviewing the CSS you shared, I identified two statements that could potentially be causing conflicts in the browser:
.entry-content-wrapper li { margin-left: 1em; padding:3px 0;}
.entry-content-wrapper div li {
text-indent: 0px;
}
I removed the aforementioned CSS rules but kept the rest of your styles intact. Additionally, I included the following code:
ul, ol { margin-bottom: 20px; } ul { list-style: none outside; margin-left: 0px;} ol { list-style: decimal; margin-left: 0px; } ol, ul.square, ul.circle, ul.disc { } ul.square { list-style: square outside; } ul.circle { list-style: circle outside; } ul.disc, .entry-content-wrapper ul { list-style: disc outside; } ul ul, ul ol, ol ol, ol ul { margin: 4px 0 5px 0px; } ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 6px; }
.entry-content-wrapper .borderlist>li:first-child { border-top:1px solid; } .entry-content-wrapper .borderlist>li { border-bottom:1px solid; padding: 5px 0; list-style-position: outside; margin:0;}
.entry-content-wrapper li {
margin-left: 40px;
padding:0 30px;
margin-bottom:10px;
}
ol {
counter-reset:li; /* Initiate a counter */
margin-left:0;
padding-left:0;
}
ol > li{
list-style:none;
}
ol > li::before {
content: "(" counter( li ) ")"; /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
padding-right:30px;
list-style:outside;
}
li {
width:300px;
padding-right:30px;
text-indent: -50px;
}
For further reference, you can view the Live Demo Here.
The resulting output should align with what you aim to achieve, especially when the pseudo-element marker becomes widely supported by major browsers.
Having completed several projects with video backgrounds that autoplay when the page loads, I have encountered issues with mobile browsers not supporting the autoplay attribute on HTML5 videos. In these cases, an image is loaded instead of the video. To d ...
I'm currently working on implementing a custom mouse trail using temporary divs. These divs are supposed to appear at the location of the mouse and then fade out after a short period. However, I've run into an issue where the divs only appear at ...
There's a test I created to add a border between the thead and tbody, but it seems like the thead is taking precedence over the tbody. If you have any thoughts on this... Take a look at my test here: http://jsfiddle.net/cFKns/2/ Check out what I&ap ...
I recently set up a custom font in my project like this: $font-path: '~@/assets/fonts/'; @font-face { font-family: 'mainFont'; font-weight: 300; font-style: normal; src: url('#{$font-path}mainFont/mainFont.eot&apos ...
I need some advice on how to place a heading above an image. I have tried using negative margin and adjusting z-index, but the image still covers the heading. If you have a better solution, please let me know! Thank you in advance for your help! PS: Anot ...
After creating an online drumkit and guitar player, I am now looking to enhance my website by adding a feature that allows users to record their sessions and download them. Since I am new to web development and familiar only with HTML, CSS, JavaScript, and ...
Looking to align text B to the right when text A and B are on the same line, but automatically aligning text B to the left if it wraps to the next line due to space constraints. .text-left { float: left; /* Float to the left */ } .text-right { fl ...
Is there a way to hide the toolbar when in full screen mode using CSS? I've searched on StackOverflow for a solution but haven't found one yet. Essentially, I want to switch from this: https://i.sstatic.net/ODE7s.png To this: https://i.sstatic.n ...
I am looking for a simple way to make an SVG graphic rotate around its center point. The rotation doesn't need to be smooth, just a 90 degree turn and back every second. https://i.sstatic.net/H6CTF.png Here is the SVG code: <?xml version="1.0" e ...
I am in the process of creating an interactive game map using the powerful OpenLayers 3 API. My goal is to incorporate four panels into the layout - two on each side (right & left) with the map displayed in the center, positioned below the side panels. How ...
In the process of developing my react app with MUI framework, I encountered various challenges in creating a sticky footer at the bottom of my screen. After exploring different solutions, one approach that I found most satisfactory is as follows: export de ...
I'm working on a webpage that displays messages from a database using ajax. Currently, the output is just stacked downwards. I'm hoping to style the list elements to alternate from left to right, similar to an iOS Message chat. Does anyone have ...
I'm using a bootstrap col-md-1 with an image inside, wrapped in a div with padding. The issue is that the image is too small and I want it to be at least as big as the original size, https://i.sstatic.net/9hqyj.png while still being responsive. An ...
I require some assistance with the following: https://i.sstatic.net/vK9zmm.png Specifically, I need help regarding the structure shown below: <div class="row"><div class="col-md-4"> <a class="individ" href="index.p ...
I am in search of the perfect web technology or JavaScript library that can help me achieve a specific functionality. My aim is to change the colors of particular objects within an image. I am looking to create a tool where users can select a color, and th ...
I am currently in the process of developing a flat website for my landlord using the Bootstrap 3 framework. However, I'm facing an issue where my navigation bar is only displaying as an unordered list rather than a horizontal bar. The CSS code can be ...
Seeking a way to create a smooth transition in an image slider with sliding dividers using continuous switching when clicking previous/next buttons. Currently, the dividers replace each other from far positions. Any ideas on achieving a seamless single mov ...
I'm working on a script to collapse and expand a div based on click events. The code below is functioning correctly, but the container always starts off expanded when the page loads. I want to reverse this behavior so that the div is collapsed when th ...
When using my web app on an android WebView, I've noticed that whenever I click on something or navigate somewhere, a blue highlight appears on the container div. It sometimes disappears quickly, but other times it remains until clicking elsewhere. I ...
My current issue involves using jQuery to execute a .php file. Whenever an error occurs in the backend, I want to display an alert message with the error details. However, when intentionally submitting with an error, no alert pops up and it just proceeds t ...