I have code that dynamically generates <ul> lists each with two <li> in them. I want those to be displayed next to each other / broken into the next line if there isn't enough room anymore.
Currently I have this
ul.pictureBlocks{
display: table-cell;
}
This displays them next to each other with 0 space between them. I tried border-spacing and margin or padding but nothing worked. When I used display: table on the ul tag it got the spacing from border-spacing but displayed them beneath each other.
Got it
.pictureblocks{
display: inline-table;
border-spacing: 10px;
border-collapse: separate;
}
you can try this to give space between li and align them horizontally.
/--CSS Code---/
ul{list-style-type:none;}
ul li{display:inline-block; background-color:#ef8913; padding:5px;}
ul li a{ color:blue}
/--HTML Code --/
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Try this link. http://jsbin.com/kunavupa/1/edit
try display:inline-block and then padding or margin...
ul li{
display: inline-block;
background:red;
height:20px;
width:20px;
}
jsfiddle
Related
I am trying to cater for line breaks in a list so that the bullet points are used more like separators instead, I have this so far...
ul {
margin:auto;
max-width:280px;
list-style:none;
text-align:center;
}
li::before {
content: "•";
color: red;
}
li {
display:inline;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
How can I make sure that list items aren't split between lines and also make sure that bullet points only display if it isn't a new line?
I am try to make things look like this...
The width of the container and the number of items does change so trying to do this without assigning individual classes
A couple of techniques will help you achieve this effect.
1st use first-child on the list element to hide the first separator.
The second is a little hacky but it's the way to hide the bullet when the menu rows wrap; Use a pseudo-element on the ul to create an overlay to hide the first bullet in the second row.
If you want to align the bottom row to the middle you're going to want to use flexbox, with justify-content:center and move your bullet to the right after each element. Move the ul overlay to the right and hide the bullet of the last-child instead of the first-child.
ul{margin:auto;max-width:300px;list-style:none;text-align:center; position:relative; overflow:hidden;padding-left:0; display:flex; flex-wrap:wrap; justify-content: center; }
ul:before {content:" "; height: 100%; position:absolute; right:0; width:0.75rem; background-color: #fff; z-index:2; }
ul> li{display:inline; padding:0 0.5rem; position:relative;}
ul > li:before {position:absolute; right:0; transform:translateX(50%); content: "•"; color: red;}
ul > li:last-child:before{ display:none;}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
I have the following code:
HTML
<ul class="menu">
<li>Item 1</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
<li>Item 4</li>
</ul>
CSS
ul.menu
{
display: flex;
list-style: none;
}
ul.menu li::before
{
content: "\2022";
}
Items 1 and 4 work fine but there is one extra space before items 2 and 3 (right after the bullet). I know that's because there is a new line in HTML for these items. However, everything works fine without the ul.menu li::before rule.
I'm sure I'm missing something obvious. Does anyone have an idea how to get rid of the extra space and still preserve new lines in HTML? Some neat solution maybe, rather than just ul.menu li a::before (this one is not good, it makes the bullets clickable as well).
JSfiddle
P.S.: same problem appears even without display: flex; so it's obviously not flexbox-related.
The space you see is a characteristic of all inline elements - just add display: flex to the li too.
See demo below and my updated Fiddle:
body {
font-family: sans-serif;
}
ul.menu {
display: flex;
list-style: none;
}
ul.menu li::before {
content: "\2022";
}
ul.menu li {
display: flex;
}
<ul class="menu">
<li>Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
<li>Item 4
</li>
</ul>
You have to write <li> for item2 and item3 in same line it will remove space.
Try this code. It works.
JSFiddle
HTML
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
CSS
body
{
font-family: sans-serif;
}
ul.menu
{
display: flex;
list-style: none;
}
ul.menu li::before
{
content: "\2022";
}
I'm creating a simple Navigation menu and am unable to get my button to display inline next to sibling li elements.
I need all three elements inline and floating right.
HTML
<nav>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
<button>A Button</button>
</nav>
And here's the CSS
nav {
float: right;
}
li {
display: inline-block;
}
button {
display: inline-block;
}
Here's the fiddle --- https://jsfiddle.net/et8omw2c/
Okay 2 ways.
One I would recommend changing your markup and include the button within an li element like:
<nav>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li><button>A Button</button></li>
</ul>
</nav>
or change the css like so which I don't recommend:
nav {
float: left;
padding:0;
margin:0;
width:100%;
}
li {
display: inline-block;
float:left;
}
button {
display: inline-block;
float:left;
}
Apply inline-block to the ul element as well.
It is happening because your ul element is display:block. Add float:right to it or use display:inline-block and your problem will be solved.
Use this CSS
ul{
float:right
}
or
ul{
display:inline-block;
}
Without adjusting my padding for my 'nav ul li' because its used for spacing out navigation links, how can i fill the full width of the dropdown links background 'nav ul li ul li' as it only seems to fill half of the background color.
(HTML):
<nav>
<ul>
<li>Num 1</li>
<li>Num 2</li>
<li>Num 3</li>
<li>Num 4</li>
<li>Num 5</li>
<li>Num 6
<ul>
<li>Drop 1</li>
<li>Drop 2</li>
</ul></li>
<li>Num 7</li>
</ul>
</nav>
(css)
JSFIDDLE
Note: Choosing not to upload CSS as i have to use the Harvard referencing system and any similarities compared with online snippets returns as a higher plagiarism percentage even if this is my own work, so i'll choose to upload more precise code on JSFiddle as its not returned from the plagiarism test.
Here is a working demo
Change your padding from li to a:
nav ul li a {width:65px; display:inline-block; padding:0 30px}
and add the display and float proprieties to second-level li:
nav ul li ul li { padding:0; border:none;display: list-item;float: none }
well a quick way to fix this is instead of adding padding you just add the 30px on the right and left to the total width of the nav ul li which ends up being 125px
nav ul li {
border-right: 1px solid #355e7f;
display: inline-block;
float: left;
width: 125px;
}
Here is an updated JSFIDDLE
Hope that helps!
I have a parent <ol> and couple of <li> items in that.
<ol style='width=800px;display :block;float:left;'>
<li style='display :block;float:left;'> Item 1 </li>
<li style='display :block;float:left;'> Item 2 </li>
<li style='display :block;float:left;'> Item 3 </li>
<li style='display :block;float:left;'> Item 4 </li>
</ol>
Is there any way my list item can be arranged in a way where it will equally divide the parent width (800px), and each item will have the same amount of width? I.e. each <li> will take 200px width.
I don’t want to hardcode the value. Is there any style attribute which will do that?
I dont want to hardocode the width like 20 % or something because the list items are dynamically added.it may be 4 or 5 or 6 sometimes
Try this: http://jsfiddle.net/QzYAr/
For details on display: table-cell: Is there a disadvantage of using `display:table-cell`on divs?
table-layout: fixed ensures equal width li elements.
CSS:
ol {
width: 400px;
/*width: 800px;*/
display: table;
table-layout: fixed; /* the magic dust that ensures equal width */
background: #ccc
}
ol > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
HTML:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
I think this is what you're asking for. It required jQuery though.
http://jsfiddle.net/sKPLQ/3/
CSS:
ul {
width: 800px;
}
li {
display: inline-block;
float:left;
}
JS:
var evenWidth = $(".list").width()/$(".list li").size();
$(".list li").css("width", evenWidth);
HTML:
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Here is a minimalistic design. It will produce responsive equal distance cells
<style>
div { border:1px solid red; width:400px; height:400px; }
ul { width:100%; height:50px; list-style: none; margin:0; padding:0; text-align: center; }
li { background-color:green; color:White; width:1%; position:relative; display:table-cell; border:solid 1px white; }
</style>
<div>
<ul>
<li>CELL 1</li>
<li>CELL 2</li>
<li>CELL 3</li>
<li>CELL 4</li>
</ul>
</div>
The magic is width:1%; position:relative; display:table-cell;
As Renesis pointed out, I think table cells is the only option, unless you're scripting it. Although you can use table-cell in CSS.
#menu {display: table-row;}
#menu li {display: table-cell;}
..which will simulate the behaviour. Note that in IE it will, as usual, cause problems in the lower versions.
Please note: The original poster edited their question to exclude percent after I posted this answer.
Yes, you simply need to figure out the percent that each will use. In this case, 20%.
Also, you have some slight problems with your HTML (missing quote and width= instead of the correct width:).
<style>
ol { width:800px;display :block;float:left; }
li { border:1px solid black; display :block;float:left; width:20%; }
</style>
<ol>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ol>
Update:
While you can get away without defining pixels by using a percentage, there is no way with block elements to get away without defining any width value (and width values are only valid as a unit or a percentage).
Not that I'm suggesting you use tables, but table cells are the only elements in HTML that sort of behave like what you are asking for.