I'm trying to change the spacing between sublist dots.
I have two lists coded like this
<ul>
<li></li>
<ul>
<li></li>
</ul>
</ul>
the spaces between the dots of a list and its sublist is huge, similiar to this:
*
*
but I want the dots to be close, like this
*
*
I tried changing the indent spacing, but that has no effect. Was wondering what the proper code was to do this.
To control the spacing vertically between li elements, adjust their top and bottom margin in the CSS.
/* Example */
li { margin: 10px 0; }
To control the spacing on nested sublists, adjust the nested ul element's left padding, which is usually given by browsers a default of 40px.
/* Example */
ul ul { padding-left: 20px; } /* Cut normal width in half */
See fiddle
You can give an id to sublist
<ul>
<li></li>
<ul id="test">
<li></li>
</ul>
</ul>
And in the css
#test {
position: relative;
left: 100px;
}
Edit: Obviously you have to adjust the pixels of "left", something like 5-10 should do what you want
Use the margin-left in css
for example
#ul{
margin-left: -20px;
}
<ul>
<li>a</li>
<ul id="ul">
<li>b</li>
</ul>
</ul>
Related
I'm trying to figure out how to add vertical dividers between my horizontal layout. I have 3 columns and I'd like dividers to the right and left of the middle column.
Typically I would add an :after rule in CSS to draw it after each element and a :last-child to exclude it from the end, but the problem is Susy's span() function fills up any room available to add a 1 pix divider between the elements.
Here is what my code looks like:
Sass:
nav {
ul {
list-style-type: none;
li {
width: span(1 of 3);
float: left;
}
}
}
HTML:
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
The goal of grid system like Susy is to fill up all the available space by arranging elements. But there are a couple of options for adding borders:
1) Add box-sizing: border-box;, probably by putting #include border-box-sizing; in your li declaration. See more on box-sizing.
2) Use outline, which doesn't add to an element's width. Example: outline: solid black 1px;
How can I make the <li> item width fit the text length in Bootstrap 3? My menu item is shorter than the text which causes my class="active" to look ugly.
This is the navbar in which it occurs:
<div id="menu" class="col-md-1">
<ul class="nav nav-pills nav-stacked">
<li class="active">Startseite</li>
<li>Kontakt</li>
</ul>
</div>
make a .custom_li class and give
.custom_li{
display:inline-block;
}
EDIT
To force same size, i'll suggest using max-width and place it under some media-query
li{
display: inline-block;
max-width:50%; /* limit width */
word-break:break-all; /* wrap extended text*/
border:1px solid red /* demo */
}
demo here
some optional things
some optional things
When I tried display: inline-block; it removes the bullet.
Instead, I use float:left; to have them only as wide as text, while preserving the bullet. Optionally, add clear:both; to keep it as a vertical list with each item on a new line.
CSS
.my-list > li {
float: left;
clear: both; /* remove this if you want them flowing inline */
}
HTML
<ul class="my-list">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ul>
If the display: inline-block; or display: block; is messing up the alignment.
Then just use width: fit-content;
Prevent it becoming a block by adding display: inline-block; to the proper element.
Post more code and preferably CSS if you want details.
I got it to work with the following css:
ul {
margin: 0 auto;
width: fit-content;
}
li{
display:flex;
margin: 0.5rem auto;
}
Basically what I did was make the container width to fit content. Used the CSS hack to make sure it would center using the margin. In the li tag I wanted the contents to be centered so I set it that way
I have a list of <li> elements where the <ul> has a fixed size of 150px (height) and 400px (width)
How are you today
How I would like to stay:
NOTE: This list is dynamic!
Thank you all for your help
You can't.
LIs go vertically or horizontally, they do not wrap to new coloumns.
If you want lists as illustrated you need to use multiple ULs and float them.
If your LIs in on big long list, you can write some JavaScript that will break them down into multiple ULs. CSS cannot do this by itself.
Maybe an answer to an old post. But if you want your list items to be dynamic and in 4 columns, you could use this in the CSS.
div {
-webkit-columns: 100px 4; /* Chrome, Safari, Opera */
-moz-columns: 100px 4; /* Firefox */
columns: 100px 4;
}
Wrap a div around the <ul> and than use this css.
Working DEMO
You need to use multiple containers and distribute the elements between them. CSS doesn't currently support columnar layouts such as what you're trying.
Anyway, if the content is generated server-side, you can separate into columns there. Otherwise you can do it client-side with JavaScript. If you don't mind jQuery, something like Masonry can do all the heavy lifting.
sorry to disappoint but you'll need to break the list into three,
<ul>
<li></li>
...
</ul>
<ul>
<li></li>
...
</ul>
<ul>
<li></li>
...
</ul>
set a width for the ul elements and let them float
ul {
display: block;
width: 200px;
float: left;
}
a following element should have clear: left;
you may use the css display property.
ul li {
display: inline-block;
}
You could simply float them...
li { float: left; width: 200px; }
DEMO
or use inline-block....
li { display: inline-block; width: 200px; }
Demo
These do result in list items being displayed horizontally rather than vertically.
If you want list items to remain listed vertically, then you need to use mutiple containers (ul) for each list.
When you think about your problem a bit creative then there is a relative easy solution.
You must just decide how much li's you have at max in one column. When you get your data dynamically, then you can directly create the ul's dynamically.
It can be achieved on server side and also on client side without a problem.
Since you know the dimensions in pixels of the UL and LI elements, you can position the LIs easily, at least theoretically. For example:
<!DOCTYPE html>
<html>
<head>
<title>example<title>
<style type="text/css">
ul { border : 2px solid blue ; height : 200px }
li { height : 25px; }
li:nth-child(9),
li:nth-child(17),
li:nth-child(25),
li:nth-child(33) {
margin-top : -200px
}
li:nth-child(8) ~ li { margin-left : 150px }
li:nth-child(16) ~ li { margin-left : 300px }
li:nth-child(24) ~ li { margin-left : 450px }
li:nth-child(32) ~ li { margin-left : 600px }
</style>
</head>
<body>
<ul>
<li>LI number 1</li>
<li>LI number 2</li>
...
<li>LI number 36</li>
</ul>
</body>
</html>
The UL block will only be as high as the latest column, so you need to explicitly set its height.
I wish to have a bunch of rectangles containing text, sitting next to each other, and wrapping to the next line where necessary. I have a maximum width for each rectangle, and any text that doesn't fit inside the rectangle should be hidden.
Here is the code I have written
HTML
<div id="outer">
<ul id="list">
<li>The name of soemthing</li>
<li>Something else</li>
<li>Something else 2</li>
<li>Something else 3 </li>
<li>Something else 4</li>
</ul>
</div>
CSS
#outer {
background-color: #0000ff;
width: 500px;
}
#list {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#list li {
display: inline-block;
max-width: 100px;
overflow: hidden;
white-space:nowrap;
height: 24px;
padding: 0px;
background: #ff0000;
margin: 0px;
}
It works perfectly in Chrome.
In Firefox/IE, there is a small vertical gap/margin added between each rectangle.
I can make the gap go away by removing the 'overflow: hidden' on the LI elements, but this ofcourse allows rectangles to grow freely - which is what im trying to avoid.
Anybody know why this is happening?
Try putting all the <li> tags on the same line. The browsers are rendering the line break as white space.
<div id="outer">
<ul id="list">
<li>The name of soemthing</li><li>Something else</li><li>Something else 2</li><li>Something else 3</li><li>Something else 4</li>
</ul>
</div>
Can you use floated block elements instead or do they have to be inline-block elements?
Here's your example, and here's the code working with shrink-wrapped floating elements.
You simply need to add vertical-align: top to #list li: http://jsfiddle.net/thirtydot/PF4fW/
Every time you use display: inline-block, you should consider setting vertical-align.
Look at "Series A" here to compare the different possible common values.
I'm trying to make a <ul> tag display inline with a line of text. here's the HTML.
<li>
<input type="checkbox" id="449" value="Whats that?" class="checkbox"><label for="449">Whats that?</label>
<ul class="449">
<li>{...removed...}</li>
<li>{...removed...}</li>
<li>{...removed...}</li>
<li>{...removed...}</li>
</ul>
</li>
What it renders as now is this:
Whats that?
Li element
Li element
Li element
Li element
But I want it to render like this:
Whats that? Li element
Li element
Li element
Li element
What CSS rules do i need to put into that <ul>? And nevermind that class name, it's for zany javascript purposes. Thank you!
Float them:
p, ul {
float: left;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
<p>Whats that?</p>
<ul>
<li>Li element</li>
<li>Li element</li>
<li>Li element</li>
<li>Li element</li>
</ul>
ul.449{
display: inline-block;
}
Will get it inline. The vertical alignment is a bit weird.
I suggest ul.449 { display:inline-table} but it will support ie8+. Another solution with cross browser support I suppose could be to float:left; all elements (input, label, ul) and add margin:0; the ul
First approach: http://jsbin.com/axako3/2
Second approach: http://jsbin.com/axako3/3