This question already has answers here:
Removing ul indentation with CSS
(3 answers)
Closed 4 years ago.
This might seem like a dumb question, but I've added an UL to a basic page and the list seems to be off-centered. There's nothing special about the list. No specific css added: just a list. When I load live it's slightly off center.
Is there a default margin or padding on the left side?
<h3>Title Heading</h3>
<ul id="listItems">
<li>itemOne</li>
<li>itemTwo</li>
<li>itemThree</li>
</ul>
The main body has all the css code for centering, aligning, float, etc. The
'Title Header' align perfectly. Just list is a little off.
Thank you.
Oh, don't know if this is important, but I added the 'id' cause... wanted to use 'first-of-type' to give 1st item em(bold).
The problem is that by default, browsers have custom css - in chrome for example:
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
You'll have to use a custom rule for your ul:
element.style {
margin-left: 0px;
/* set to 0 if your not using a list-style-type */
padding-left: 20px;
}
Lists will always align so the text remains in line with the edge of the parent element. This means the bullet points will by default sit outside (to the left) of the element. You can force the alignment to happen to the bullet point, not the text like so:
ul {
list-style-position: inside; }
Alternatively you can just add your own margin to push the entire list element like so:
ul {
margin-left: 20px; }
Related
I am trying to left align a list inside a css grid. However, the text-align and setting the margins and padding don't seem to work. How can I left align the ul list. Codepen: https://codepen.io/centem/pen/oNvZLgP Thankyou.
ul {
list-style: none;
text-align: left;
}
li {
padding-left: 0;
margin-left: 0;
}
Use the below CSS
ul{
padding-left: 2%;
}
You can accordingly change the padding value depending upon the requirements.
Also if you want your list items completely aligned to the left, get rid of the following padding line under the .grid-page > div selector:
padding: 0px 20px;
To complete Not A Bot's answer (it's always good to know why something works), the reason behind your issue was the default padding of unordered lists.
UL Default CSS Values
These values are there to make lists look like written documents lists but obviously, that's not what we want in many cases.
Usually, margins and paddings of elements should be reset. In your case:
ul {
padding: 0;
}
should be enough, since you're already setting a padding for the container.
Check out the gallery i'm building on a webkit browser..
notice that the words on the top right - available, sold, contact - which are part of a <ul>, are listed vertically.. even though on Firefox, they are listed horizontally because of ul {list-style-type: none;} and li {float: left;}.
Click "available", and notice that they neatly align horizontally. Use the back button or click "dubious" in the top-left corner and they stay in that neat horizontal alignment on the first page. Then refresh your browser, and it becomes vertical again.
.menu ul {
list-style-type: none;
margin: auto;
}
.menu li {
padding: 15px;
float: left;
margin-left: 2px;
margin-right: 2px;
font-size: 20pt;
}
The font in the menu titles used with font-face definition causes this.
A related topic: Accurate width of element when using font-face in Chromium
You may try "display:inline-block" for li's instead of "float: left;"
And why don't you use png images for menu titles?
I've got an issue I'm having with unordered lists in WebKit Browsers. This code is getting injected into a page that I don't own, so I can't really use a CSS reset, but I can't figure out what's causing my issue.
<div class='instruct'>
<ul>For best results please make sure:
<li>Your entire face including your eyebrows and chin are visible in the frame</li>
<li>Your face is well lit but please avoid excessive backlighting</li>
</ul>
</div>
The CSS:
.instruct {
display: inline;
font-size:14px;
text-align:center;
padding-top: 10px;
padding:0px;
margin: 0px;
}
.instruct ul {
position: relative;
left: 30px;
width: 320px;
font-weight: bold;
padding: 0px;
margin: 0px;
list-style: none;
}
.instruct ul li {
font-weight: normal;
text-align: left;
text-indent: 0px;
padding: 0px;
padding-top: 10px;
margin: 0px;
}
The result I'm currently getting in IE/FF is that all of the list items are properly aligned on the far left hand side of the UL content box. However, in Chrome and Safari, there is about 20px worth of space between the left side of the UL content box and each of the LI content boxes.
When inspecting the element in Chrome's developer console, the box highlighting affect is clearly about 20 pixels away from the left hand side of the the UL's left hand side. It's like there's 20 pixels of padding or margin coming from somewhere.
Given that padding and margins for both the UL and the LI are all zero, I can't figure this out.
Any ideas would be appreciated.
EDIT:
You can see a screenshot of it here:
Sorry... necro-thread.. but it likes to place high on Google searches for the topic.
Your inline-block (or inline) gets an extra 4px of space generated by default on the list item. Go up to the UL tag and add a font-size: 0
Problem solved.
try {-webkit-margin-before:0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; -webkit-padding-start:0}
check out http://codesearch.google.com/codesearch/p#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/css/html.css if that doesn't work
There shouldn't be anything inside the <ul> tag other than <li> tags.
That goes for the text you have directly inside the <ul> tag - that is probably what's causing the problem.
This seems to be a problem with Chrome for Android.
The fix is to not set margin:0px; for the ul but rather set margin-left:0px; and margin-top:0px;.
I have a template that uses an unordered list to create the menu. See here
When I translate the website using Google translate the menu breaks if the translations are too long, causing the floated list items to drop down. Translating it into French seem to cause the problem.
See here
Is there a way I can force the text to wrap if it is too long for the menu?
I don't mind if I have to change the unordered list to something else, but I would prefer not to use a table.
use word-wrap property of css
word-wrap: break-word;
The short version: we're going to use display: table-cell.
The long version is.. long:
On .access, remove the padding rule.
On .sf-menu, remove float: left and add display: table.
On .sf-menu li, remove float: left and add display: table-cell and vertical-align: middle.
On #header and #footer, add position: relative.
On .access, remove height: 32px and margin-top: -32px and add position: absolute and width: 100%.
On #header .access, add bottom: 0.
Move the border-left from sf-menu a to sf-menu li.
Change the selector .sf-menu a.first to .sf-menu .first.
This part isn't great, but to get back that 20px padding on the left (and right), add an extra li at the start: <li class="noHover" style="width: 20px; border-left: 0"> </li>; and at the end: <li class="noHover" style="width: 20px; border-left: 0"> </li>. You might not need the s. You'll need to do the same thing with #footer.
To stop the :hover on the "padding" lis, add something like this:
.sf-menu li.noHover:hover {
background: none !important
}
On #footer, add padding-top: 48px.
That's everything (unless I screwed up somewhere), except for IE6/7 support. If you want that, you're going to have to put a new version up with my fixes applied (can be in a temporary new folder if you like). It's too much work to attempt to fix IE6/7 when I have to apply all those changes first to test it properly.
#Pranay pointed to the right direction but you need to set the width to the lis not the ul! so for example:
ul.sf-menu li {
width: 80px; /* make this the maximum width possible! */
word-wrap: break-word;
}
And insert a clearing div right after the menu ul:
<div class="clear"></div>
Where the clear class is defined as:
.clear {
clear: both;
width: 0;
height: 0;
}
I am building a menu system presented to the user in multi-column format. The column-count property in CSS3 gets me 90% of the way there, but I'm having difficulties with alignment under Chrome.
The menu is relatively simple:
an unordered list divided into multiple-columns by the column-count property
columns should fill sequentially, so column-fill: auto
menu items are represented as list items
each list item has a a clickable anchor tag, extended fully via display: block
The alignment issue I'm having is most noticeable with a top-border and some background coloring on each list item. In Firefox, the list items are always aligned cleanly across each column, never bleeding into the previous/next column. In Chrome, alignment is a crapshoot, varying with how many list items are present and any padding/margin properties.
I've posted the code for a simple test case here: http://pastebin.com/Ede3JwdG
The problem should be immediately evident: in Chrome, the first list item in the second column bleeds back into the first column. As you remove list items (click on them), you can see that alignment breaks down further.
I've tried tweaking the padding/margin for the list items to no avail: Chrome appears to have a flawed algorithm for how it flows content across a multi-column layout.
The primary reason I haven't ditched column-count altogether (in favor of manual generation/Columnizer/etc.) is that the menu system also involves drag-and-drop functionality across multiple sub-menus, and having the menu data laid out as a cohesive list-based hierarchy makes for clean code.
Is there a way to fix the alignment issue in Chrome or should I just give up on column-count for now?
ADDED:
jsFiddle prototype: http://jsfiddle.net/VXsAU/
JS Bin prototype: http://jsbin.com/ebode5/
You need each item in the column to be displayed as "inline-block". That will solve your problem without needing to use jQuery.
Additionally, each element can be specified to have width: 100% in order to get the them to use the full width of the rows.
Here is a working example:
$(document).ready(function() {
for( var i = 0; i < 24; i++ ) {
$("ul.newslist").append("<li><a href='#'>Item</a></li>");
}
$("ul.newslist > li").click(function() {
$(this).remove();
})
});
ul.newslist {
columns: 5;
background-color: #ccc;
padding: 16px 0;
list-style: none;
}
ul.newslist > li {
display: inline-block;
width: 100%;
border-top: 1px solid #000;
}
ul.newslist > li > a {
display: block;
padding: 4px;
background-color: #f6b;
text-decoration: none;
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="newslist"></ul>
I managed to balance uneven vertically-aligned columns by applying margin-* properties to the elements inside the multicolumn'd container.
.content {
column-width: 15em; /* or could be column-count, however you want to set up multi columns */
}
.content > section {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
As for vertical margins leakage. You can replace margin with pseudo-element. Then set its height to desired margin value. You also need to set -webkit-column-break-inside: avoid; on the element containing pseudo-element so that it is not moved to another column. Do that only for webkit with the help of css-hack (not recommended) or js-detection (best way). Here is CSS:
.element {
-webkit-column-break-inside: avoid;
}
.element:after {
content: '';
display: block;
height: 20px;
}
I've played around as well, and several sources I've seen online make it seem to be a known issue with webkit. A good breakdown can be found here: http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/
Someday, CSS 3!
Maybe try a jQuery plugin like http://welcome.totheinter.net/columnizer-jquery-plugin/ ?
I was having trouble with vertical alignment on a multi-column list. Turned out that the problem was that I was using bottom padding on my list li's-- I changed the li style to use a bottom margin instead, and the columns aligned to top again.
My desired outcome was wanting to get a large list of links to display across 3 columns. Simply using column-break-inside:avoid; alone didn't work in webkit.
HTML
<div class="links">
<ol>
<li><a>link</a></li> <!-- x 50 -->
</ol>
</div>
css:
.links ol {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.links li {
display: block;
border: 1px solid $background-colour; //to appear invisible
-moz-column-break-inside:avoid;
-webkit-column-break-inside:avoid;
column-break-inside:avoid;
}
.links a {
display: block;
margin-bottom: 10px;
}
Solution (quirk if you will)
I added a 1px border around the list items which seemed to contain the margins of it's children and each column then aligned to the top.
Edit: This only seems to be required if you're using global border-box
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
I solved this by removing vertical margins on the child elements, and then increasing the line-height of the children to replicate desired spacing.
I also noticed I could fix this vertical alignment issue by removing the child margins and converting it to grandchild padding.
I'm struggling with this as well, for a reporting system with many many data and titles with padding/margin that I need to flow on several columns for wider screens.
I've worked around my first big deal-breaker, the padding of the initial title element, with the :first-child pseudo-class (this is included in an #media rule for wide screens not shown here) :
The columns definition :
.dimSlider .multicol {
-moz-columns: 4;
-webkit-columns: 4;
columns: 4;
}
Canceling padding on top when in .multicol
.dimSlider .multicol h3 {
padding-top: 0;
}
Cancelling padding and margin for the first element (color: blue; is so that I see if the rule catches) :
.dimSlider .multicol .criteria:first-child h3 {
padding: 0 2%;
margin: 0;
color: blue;
}
So far, this looks way much neater in my Firefox. I'll see if there's some more tinkering to do but currently in Firefox the text looks aligned on the top, what is the most important.
EDIT :
The problem seems quite worse with webkit-based browsers indeed. To solve it entirely, I modified the template in order to have a <div></div>around all the titled sections so I can add padding / margin at the end of the divs and not at the beginning of the titles. Now in webkit browsers it looks fine too.
BTW, using percentages measurements in multicolumns is quite tricky because the percentage seems calculated to the width of the column and not the global width of the parent element. I changed this by adding padding in the parent element of the columns.
But the biggest difficulty is that Firefox doesn't support any column-span or break-inside property, so when I have very few content, it is spread over the columns nonetheless, like one or two lines on each. Again, Smarty on the rescue :
{if $element|#count <= 10}
<div class="nocol">
{/if}
So far it works now for me...
while searching for information about this i came across your question and today I've been inspecting the elements of the list.
I found that the UL element applies a margin only on the first column.
Just apply 0 padding and margin in the css and they will align
margin:0;
padding:0;
hope it helps
I had a two-column ordered list, and the left column was pushed down by default margin - so it did not align with the right column.
This fixed it.
ol > :first-child {
margin-top: 0;
}
I saw some solutions about placing -webkit-column-break-inside:avoid;. But that does not seems to work for me. Then I found out I have to place 2 things to get it working.
Place padding on the li, and give the property break-inside: avoid; on the li.
This is my code:
ul {
column-count: 2;
}
li {
font-size: 10px;
line-height: 12px;
padding: 10px 0;
width: fit-content;
min-width: 143px;
border-bottom: 0.5px solid #ccc;
break-inside: avoid;
}
this is solution for multicolumn space problem
ul li { line-height:40px; }