I have the following css:
ul {
padding:0;
margin:0;
}
li {
padding:0;
margin:0;
list-style:none;
}
ul.square li {
padding-left:20px;
list-style:square;
}
and the following Html structure:
<ul class="square">
<li>blah blah blah</li>
</ul>
the list comes up with no padding and no leading square. How can I fixed this issue?
Here you go! Just use margin, instead of padding –> Demo
ul.square {
padding:0;
margin: 0; /* reset the margin */
margin-left:20px; /* then add yours */
list-style: square;
}
This only works with ol (tried it with ul and it doesn't work). Could not get the square to work with ul with any solution provided here or elsewhere. But at least this solution does add the margin/indentation. Thank you for all of the help.
In CSS:
ul {
padding:0;
margin:0;
}
li {
padding:0;
margin:0;
list-style:none;
}
ol.margin {
padding:0;
margin: 0; /* reset the margin */
margin-left:20px; /* then add yours */
}
then in the HTML doc
<ol id="margin">
<li>blah</li>
</ol>
Related
I have the following list:
<ul id="inline">
<li>One
<ul>
<li>Inline1</li>
<li>Inline2</li>
</ul>
</li>
<li>Two
<ul>
<li>Inline1</li>
<li>Inline2</li>
</ul>
</li>
</ul>
What i want to show is the first level li as new lines and the nested list to appear at the same height as its parent but inline. Like this:
One Inline1 Inline2
Two Inline1 Inline2
This is what i have right now:
#inline {
width: 100%;
list-style-type: none;
padding:0;
margin:0;
}
#inline + ul > ul {
display:inline;
}
But I have to basic understanding of css to figure out what is going wrong.
You need to set the ul (child of #inline) and the children li's of these uls to display:inline;. The CSS would be :
DEMO
#inline ul, #inline ul li {
display:inline;
padding:0;
}
I have a simple work around for this. Lets see the fiddle.
OLD: http://jsfiddle.net/kiranvarthi/sfho4xn8/
Updated Fiddle: http://jsfiddle.net/kiranvarthi/sfho4xn8/2/
#inline {
width: 100%;
list-style-type: none;
padding:0;
margin:0;
}
#inline ul li {
display:inline;
}
Use this CSS to make it work
#inline {
width: 100%;
list-style-type: none;
padding:0;
margin:0;
}
#inline ul {
display:inline-block;
list-style:none;
margin-left:-30px;
}
#inline ul li {
display:inline-block;
list-style:none;
text-decoration:none;
margin-left:0px;
}
I want to float <li> to the left in ul ul - without setting a width to the inner <ul> element
The problem is that the <ul> is in a nav with width:70px; (take a look at jsfiddle)
Got the following ( http://jsfiddle.net/qfemF/ )
CSS:
nav {
width:70px;
}
ul {
margin:0;
padding:0;
list-style:none;
}
li {
position:relative;
}
ul ul {
position:absolute;
left:70px;
width:auto;
}
ul ul li {
float:left;
}
HTML:
<nav>
<ul>
<li>Test
<ul>
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
</ul>
</nav>
If i set e.x. ul ul { width:200px; } it works, i also tried width:auto - but that doens't work.
This is because of the position:relative that you have set on your <li> in your css.
Delete this row in your css and it should be fine:
li { position:relative; }
Check the demo to see its working.
DEMO
Update: (after new comment from OP)
You schould give the ul ul a width with fixed pixels.
ul ul {
....
width:200px; /* instead of width:auto; */
}
Check the demo to see its working.
DEMO
C Travel's answer is correct, you need to remove position: relative; from your li
But if you can't do that for one reason or another, an alternative is to set display: table; on ul ul
Demo
doing this for the first time so please be gentle. :) I am aiming for navigation menu in the centre, horizontal, with image in the middle list item. Image will be much bigger as the bottom half is name of the my company and top of the picture might be touching the top. My first problem is that the li elements are only as big as the text, whitch doesnt serve the center-thing purpouse and the second one related that it stretches the whole menu when hoovered on. Please I'm looking for solution where the text is in the middle of li and img sits down on bottom. Thanks so much for help!
<div id="menu">
<ul>
<li><span>Link 1</span></li>
<li><span>Link 2</span></li>
<span><li style="text-algin:bottom;"><img src="Linbach_tuzka.png" height="175px" alt="Domu"></li></span>
<li><span>Link 4</span></li>
<li><span>Link 5</span></li>
</ul>
</div>
body {
width: auto;
background-image: url(blue4.jpg);
background-size: cover;
margin: 2px 0 0 0;
}
#menu {
height:210px;
line-height:36px;
margin:0 auto;
text-align:center;
width:800px;
padding:0;
}
#menu ul {
display: inline;
-webkit-padding-start: 0px;
-webkit-margin-before: 2x;
-webkit-margin-after: 0px;
margin:0;
font-size: 0;
}
#menu ul li {
text-algin:center;
display:inline;
font-family:Arial,sans-serif;
font-size:40px;
padding:0;
margin:0;
text-decoration:none;
background-image:url(../Pics/Buttons/Menu/Menu.gif);
min-width:100px !important;
}
#menu a {
text-decoration:none;
color:#000000;
margin:10px 0;
padding:0;
}
#menu a:hover {
font-weight:bolder;
}
span {
width:100%;
font-size:30px;
}
the only option is left is width to <a> tag : DEMO
I have removed the direct <span> from UL and have added class 'widthAuto' so that it will not affect your logo.
#menu a {
text-decoration:none;
color:#000000;
margin:10px 0;
padding:0;
min-width:100px !important; display:inline-block;
}
Note : Menu will stretch on hover if text exceed min-width.
I have an unordered list used for navigation tabs. I want them to have space between them but I also want the beginning of the list to line up with the rest of the text to the left.
I know this is simple but I can't figure it out.
http://jsfiddle.net/29g9S/3/
<body>
<div class="page-box">
<p>I am trying to get the ul's li's to line up with the "My Blog" text and still flow with the document</p>
<h1>My Blog</h1>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</body>
CSS
.page-box{
position:relative;
left:50px;
}
ul{
position:relative;
left:0px;
}
ul>li{
float:left;
position:relative;
margin-left:100px;
list-style-type:none;
}
The key is killing the margin / padding on the ul:
.page-box{
position:relative;
left:50px;
}
ul{
position:relative;
margin:0;
padding:0;
}
ul>li{
display:inline-block;
position:relative;
margin:0 100px 0 0;
list-style-type:none;
}
Here is an updated jsFiddle. Notice the use of display:inline-block; instead of float:left;. Floats are a one way ticket to old webville! Embrace the wonder that is display:inline-block! :D
If i understood correctly css can be modified as follows,
http://jsfiddle.net/fTdHH/
ul{
position:relative;
left:0px;
padding:0px;
}
ul>li{
float:left;
position:relative;
/* margin-left:100px; */
margin-right:100px;
list-style-type:none;
}
Set
ul {
margin: 0;
padding: 0;
}
ul>li {
// no margin-left
margin-right: 100px;
}
http://jsfiddle.net/beautifulcoder/29g9S/8/
PlantTheldea is right about the margin/padding on the ul. If you want to keep the list items floated with margin-left, just remove the margin-left from the first list-item by using li:first-child:
.page-box {
position:relative;
left:50px;
}
ul {
margin:0;
padding:0;
position:relative;
left:0px;
}
ul>li {
float:left;
position:relative;
margin-left:100px;
list-style-type:none;
}
ul>li:first-child {
margin-left:0;
}
Also, is there are reason you're using position:relative on everything rather than just adding margin or padding to .page-box?
I use this CSS codes for generating fixed menu bar and I am facing margin problem, I use top and left margin 0 but this problem happened. Please check following link for detail.
Please check this URL
#menu ul{
margin-top:0px;
margin-left:0;
background:#999999;
height:50px;
width:100%;
position:fixed;
border:solid green;
list-style:none;
padding:0;
}
ul {
list-style-type:none;
margin:0;
padding:0;
}
a {
display:block;
width:60px;
}
li {
display:inline;
}
li {
float:left;
}
a {
display:block;
width:60px;
}
Use a default style sheet that "reset" the style.
Like this : http://meyerweb.com/eric/tools/css/reset/
This is because of body margin, You can remove it simply:
body{
margin:0
}
Use the following code to reset the margin and padding
* {
padding: 0;
margin: 0;
}
* {
padding: 0;
margin: 0;
}