This question already has answers here:
How to style the UL list to a single line
(5 answers)
Can I use CSS to add a bullet point to any element?
(10 answers)
Closed 3 years ago.
Just so I can try a few different layouts/designs etc could you please help me with how to get all the bullet points in a single column one after the other.
Please see the image above of how I want it to look. All the bullet points on one line going across the page.
Below is what I currently have and what I want to be displayed in bullet points that spread evenly across the page.
<a href="http://stores.ebay.co.uk/Signware/For-Walls-/_i.html?
_fsub=1806276619&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank"
style="color:#000000">- Wall Display Systems
<a href="http://stores.ebay.co.uk/Signware/For-Windows-/_i.html?
_fsub=1806276419&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank"
style="color:#000000">- Window Display Systems
<a href="http://stores.ebay.co.uk/Signware/For-Ceilings-/_i.html?
_fsub=1806276519&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank"
style="color:#000000">- Ceiling Display Systems
<a href="http://stores.ebay.co.uk/Signware/For-Floors-/_i.html?
_fsub=1806276719&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank"
style="color:#000000">- Floor Display Systems
<a href="http://stores.ebay.co.uk/Signware/Merchandising-
Accessories-/_i.html?_fsub=1806276819&_sid=1601798509&_trksid=p4634.c0.m322"
target="_blank" style="color:#000000">- In-Store Displays
<a href="http://stores.ebay.co.uk/Signware/Signware-Exlusive-/_i.html?
_fsub=1806280119&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank"
style="color:#000000">- Signware Exclusive
</a></p>
I can do normal vertical BPs but just not in columns.
You can use float to get this:
ul li {
float: left;
margin-right: 25px;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Note the margin-right I added there.
Just try this:
<style>
div {
width: 600px;
margin: auto;
}
li {
display: inline-block;
}
</style>
<div>
<ul>
<li>Wall Display Systems</li>
<li>Window Display Systems</li>
<li>Ceiling Display Systems</li>
<li>Floor Display Systems</li>
<li>In-Store Displays</li>
<li>Signware Exclusive</li>
</ul>
</div>
The <li> attribute will generate bullets, and the inline-block will make the li's lay next to each other. The <div>attribute make the text float in the center.
Related
Complete HTML/CSS newbie here. This question came to me when I was editing HTML and tried to change a specific list to display as inline but did not want to affect every other list on the page.
I created a class to separate the list in question, the HTML/CSS is below:
li.shortcut {
display: inline;
margin-right: 10px;
}
<p>To navigate faster click on these shortcuts.</p>
<ul>
<li class="shortcut">Shortcut 1</li>
<li class="shortcut">Shortcut 2</li>
<li class="shortcut">Shortcut 3</li>
<li class="shortcut">Shortcut 4</li>
<li class="shortcut">Shortcut 5</li>
</ul>
Is there a more efficient way to achieve the same thing? I am following a book but it is slowly becoming outdated so I am wondering what would be the current standard way of writing this if it already isn't.
When you want specific changes to children, think id or class on the parent.
ul.menu li { display:inline; ... }
and
<ul class=menu><li>...</li>...</ul>
try use CSS :nth-child() Selector like this
li.shortcut:nth-child(2) {
display: inline;
margin-right: 10px;
background-color:green;
}
<p>To navigate faster click on these shortcuts.</p>
<ul>
<li class="shortcut">Shortcut 1</li>
<li class="shortcut">Shortcut 2</li>
<li class="shortcut">Shortcut 3</li>
<li class="shortcut">Shortcut 4</li>
<li class="shortcut">Shortcut 5</li>
</ul>
or use another way you want source
The question pretty much explains it but I have list items I want to put a simple diamond icon before them but when I try to use ::before it ends up putting the image above instead of the same line and I can't really seem to find out how to put it right before the list icon on the same line.
Like I said the image is just a small diamond, its 5px by 5px
.list-menu::before {
content: url('../images/menu-icons/image-before.png');
}
<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu">Home</li>
</ul>
</nav>
</div>
There's no need to use the ::before pseudo-element here at all. You can just use a background image:
.list-menu {
background-image: url('http://placehold.it/16x16');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px; /* Adjust according to image size to push text across. */
}
<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu">Home</li>
</ul>
</nav>
</div>
Well, list-style-image is made for that.
Supported since IE 4.0. That should be enough I guess.
ul {
list-style-image: url('http://placehold.it/12x12');
}
<ul>
<li> Text content </li>
<li> Text content </li>
<li> Text content </li>
</ul>
Answer 2022
Nowadays you can use ::marker pseudo element
li::marker {
content: ' 🤖 '
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
What the Header Should Look Like
This is how the header should look like.
What it currently looks like
As you can see, my header isn't looking too good... I seem to be having some floating issues.
Current Header Code
Here is the HMTL I used to generate my header.
I'm trying to center the h1, float the logo to the left completely and have the h2 display beside the logo. The publish date and publisher are fine.
<header>
<ul style="list-style-type:none;float:right;">
<li style="float:left;">
<img src="C:\Logo.jpg" alt="Logo"/>
</li>
<li style="float:left;">
<h2>Statuts de Production</h2>
</li>
<li style="float:right;">
<h1 style="margin-bottom:0px">Machines en cours d'assemblage</h1>
</li>
<ul style="list-style-type:none;float:right;">
<li>
Dernière mise à jour: <xsl:value-of select="Table/Publish/DateEntry"/>
</li>
<li>
Par: <xsl:value-of select="Table/Publish/Username"/>
</li>
</ul>
</ul>
</header>
Am I not using the right approach? Should I use a table instead of an unordered list?
If you want to vertical align the list items and indent the middle one, just remove the styles from the HTML and use this external CSS (using external CSS is the first thing to improve your approach):
ul { display: block; list-style-type:none; height: 50px; }
li { display: inline-block; vertical-align: middle; }
ul ul { display: inline-block; }
ul ul li { display: block; }
and set the padding to each list item as you want, the third item might be floated right.
Second: you can not use image path on your HDD C:\Logo.jpg to enable the access from clients, use the http://... protocol.
Third: you can not use ul as direct child of ul. Only lis are allowed inside ul
<ul>
<li>item 1</li>
<li>item 2</li>
<li>
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
</ul>
</li>
</ul>
Dose the following help you? it is designed such that the hight is constant.
<div style='position:relative; padding:0px 200px 0px 200px; background-color:gray;height:20px;box-sizing:border-box;'>
<div style='position:absolute;background-color:yellow; left:0px; top:0px; height:100%;width:200px;'>
left pannel
</div>
<div style='position:absolute;background-color:yellow; right:0px; top:0px; height:100%; width:200px;'>
right pannel.
</div>
<div style='box-sizing:border-box;width:100%;text-align:center;'>
Center
</div>
</div>
You can see it also here.
I am using <ul>'s and I would like to have the circles (just the circles or disks) the start off each <li> appear bigger. Is there an easy way to do this with CSS?
How disc, circle and other list style types are rendered is up to the browser to decide, and is fixed on a browser-by-browser basis. Even different versions of IE draw them at different sizes.
You can't control this without altering the markup (see Marty Wallace's answer) unless you make your own circle images to use with list-style-image instead. (Still provide list-style-type as a fallback for when images can't load, etc.)
You could just put a <span> with a smaller font size around the content of the <li>.
HTML:
<ul>
<li><span>list item</span></li>
<li><span>list item</span></li>
<li><span>list item</span></li>
</ul>
CSS:
ul
{
font-size: 20px;
}
li > span
{
font-size: 10px;
}
as answered by #BoltClock, you should use custom images like shown below. Assume that you have ball.gif in the current directory (which can be bigger in your case).
<UL STYLE="list-style-image: url(ball.gif)">
<LI>Bullet 1</LI>
<LI>Bullet 2</LI>
</UL>
I want to automatically add the HTML character » (») to the left of each li element.
What would be the best practise?
I want the HTML to be:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
And it should display:
» item 1
» item 2
» item 3
I found the above answer didn't work for me, but the following does:
li:before{
content: "\00BB";
}
This uses the hexadecimal code for » instead.
A nice hexadecimal converter can be found here.
If you don't want the arrows to appear as content then why not go for a css background?
li { background: url("raquo.gif") no-repeat left center; }