HTML
<ul style="padding-left:0;">
<li>A journey in to the digital</li>
<li>Global thought leaders</li>
</ul>
HTML browser support this ul padding-left. So there is no issue in browser. But in Gmail that padding-left style not working. How to fix that issue.
try Float:left or give margin-right: % or padding-right: %;
Wrap each bullet in a table-cell using a pseudo element.
ul{
display: table;
margin-left: 0;
padding-left: 0;
list-style: none;
}
li{
display: table-row;
}
<head>
<style type="text/css">
ul.c1 {padding-left:0;}
</style>
</head>
<body>
<ul class="c1">
<li>A journey in to the digital</li>
<li>Global thought leaders</li>
</ul>
</body>
Related
<style>
.footer h3 {
width: fit-content;
margin: 15px 30px;
display: inline;
}
.footermenu nav {
display: inline;
}
</style>
<body>
<footer class="footer">
<h3>© ALL RIGHTS RESERVED </h3>
<nav class="footermenu">
<ul>
<li>ABOUT US</li>
<li>MORE ABOUT</li>
</ul>
</nav>
</footer>
</body>
community! I'm doing basic training on WebDev and ran into a problem with inline positioning.
I created a footer with H3 and nav (ul>li*2). I want H3 to be positioned on the left and li anywhere, but on the same line as H3, in principle (haven't questioned the position relative to the center of the page yet).
Solved the problem through display: inline;, but for each element, but could not find a more elegant solution and without duplication
.class footer {
display: inline;
}
.class h3 {
display: inline;
}
and so on.
Please help me find a competent and elegant solution. Thank you!
<footer class="footer">
<h3>© ALL RIGHTS RESERVED </h3>
<nav class="footermenu">
<ul>
<li>ABOUT US</li>
<li>MORE ABOUT</li>
</ul>
</nav>
</footer>
.footer h3 {
width: fit-content;
margin: 15px 30px;
display: inline;
}
.footermenu nav {
display: inline;
}
Try to use flex in order to set the position of elements
footer {display: flex;}
More info here
As said #KristiK, flex is a good way.
But you have a wrong.
.footermenu nav doesn't have sense in your code. It points to nav elements inside .footermenu. So these are appropriate selectors for styling to nav in your code:
nav or .footermenu or nav.footermenu.
<style>
.footer h3 {
width: fit-content;
margin: 15px 30px;
}
ul {
margin-top: 20px;
display: flex;
}
a {
padding-left: 20px;
}
</style>
<body>
<footer class="footer" style="display: flex">
<h3>© ALL RIGHTS RESERVED </h3>
<nav class="footermenu">
<ul style="list-style: none;">
<li>ABOUT US</li>
<li>MORE ABOUT</li>
</ul>
</nav>
</footer>
</body>
I have a list of href links that I want to center.
<div id="top-nav">
<ul>
<style>
ul li,
ul li a {
color:black;
font-size:20px;
}
</style>
<li>How Does it Work?</li>
<li>FAQ</li>
<li >Discord Server</li>
</ul>
</div>
So far I've tried
<li style="text-align:center;>Discord Server</li style="text-align:center;>
and
<li><a style="text-align:center;href="Discordserver.html">Discord Server</a style="text-align:center;></li>`
Neither of these worked
Since there are three, is there a way of centering one of the lists and having one on the left and one on the right of the centered one?
Try writing the attached code, it will surely work. And if it doesn't let me know in the comments I will try my best to help you. I have added margin-left: 50%; corrected a bit of CSS.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
li{
color:black;
font-size:20px;
margin-left: 50%;
}
</style>
</head>
<body>
<div id="top-nav">
<ul>
<li>How Does it Work?</li>
<li>FAQ</li>
<li >Discord Server</li>
</ul>
</div>`
</body>
</html>
You can try
I think it will help
.top-nav , ul {
display:flex;
flex-direction:column;
justify-content: center;
align-items: center;
}
It's unclear what exactly you're trying to achieve based on the question, but try this:
ul {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
ul li {
margin: 0 20px;
}
<div id="top-nav">
<ul>
<li>How Does it Work?</li>
<li>FAQ</li>
<li >Discord Server</li>
</ul>
</div>
I also want to note something else since you've said you're new to lists and maybe HTML – you don't need to apply inline styles to both the opening and closing tags, just the opening tags.
Incorrect:
<li style="text-align:center;>Discord Server</li style="text-align:center;>
Correct:
<li style="text-align:center;>Discord Server</li>
This won't actually cause any issues, but it's not valid HTML.
I'm not sure how to build a horizontal list that looks like this:
Here are the rules:
There is an unlimited number of items in the list.
Each item should be on a single line and not wrap to a 2nd line.
Multiple items can be on a single line if there is space for them to fit
If multiple items are on a single line, they should be separated by a divider
The divider looks like a bullet, but it could be an image
Need it to work in modern browsers as well as IE8+
The thing I'm not sure how to do is to make the bullets appear only between items, and not also before or after each row of items.
For those of you who don't have to worry about IE8, this is as simple as:
ul li { list-style: none; display: inline; }
ul li:after { content: " \00b7"; }
ul li:last-child:after { content: none; }
This solution matches all of OP's requirements, except IE8 compatibility (that was 2013).
Simple markup. No JavaScript. No :last-child
Link to CodePen
ul {
display: inline-block;
padding: 0;
margin: .5rem;
text-align: center;
background-color: #fff;
}
li { display: inline; }
li a { white-space: nowrap; }
li:after {
content: " ";
letter-spacing: 1em;
background: center center no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xMkMEa+wAAAAnSURBVBhXY/Dz89MA4sNA/B9Ka4AEYQIwfBgkiCwAxjhVopnppwEApxQqhnyQ+VkAAAAASUVORK5CYII=);
}
body { background-color: #D3D3D3; }
<div id="d">
<ul>
<li><a>Profile Image</a></li>
<li><a>Name</a></li>
<li><a>Activity Information</a></li>
<li><a>Distance</a></li>
<li><a>Pace</a></li>
<li><a>Points Earned</a></li>
</ul>
</div>
<div style="width: 20rem"><script>document.write(d.innerHTML)</script></div>
<div style="width: 10rem"><script>document.write(d.innerHTML)</script></div>
For almost all browsers, you can use the CSS3 selector last-child instead of JavaScript:
ul li { display: inline; white-space: pre; }
ul li:after { content: " \00b7 "; }
ul li:last-child:after { content: ""; }
The white-space: pre stops wrapping within list items (because usually you want it to wrap between list items), and is a hack that allows you to increase the space between list items by adding spaces on the second line.
u00b7 ⋅ (MIDDLE DOT) is the standard unicode character for interpuncts, but you could also use u2022 • (BULLET), u2b24 ⬤ (BLACK LARGE CIRCLE), U+2043 ⁃ (HYPHEN BULLET), or any other unicode character you choose.
Note that some characters may not be supported on all systems.
Here is a further improved version. I kept getting an inconsistency at certain page widths where two bullets would be missing rather than just the last one. i.e.
link1 · link2 · link3 link4
link5 · link6
I think the issue was that removing the last bullet separator could itself affect the text flow if the page width was just right. The new script locks the original text flow by adding and removing literal line breaks.
I have the same script to run every time the screen is resized so you don't get stuck with awkward line breaks.
<style>
ul { width: 700px; text-align : center }
ul li { display: inline; white-space: nowrap; }
ul li:after { content: " \00b7"; }
ul li.nobullet:after { content: none; }
</style>
<body onresize="processBullets()" onload="processBullets()">
<ul>
<li>Harvard Medical School</li>
<li>Harvard College</li>
<li>Harvard Medical School</li>
<li>Harvard College</li>
<li>Harvard Medical School</li>
<li>Harvard College</li>
<li>Harvard Medical School</li>
<li>Harvard College</li>
</ul>
<body>
<script>
function processBullets() {
var lastElement = false;
$("br").remove(".tempbreak");
$("ul li").each(function() {
$(this).removeClass("nobullet");
if (lastElement && lastElement.offset().top != $(this).offset().top) {
$(lastElement).addClass("nobullet");
$(lastElement).append('<br class="tempbreak" />');
}
lastElement = $(this);
}).last().addClass("nobullet");
}
</script>
If you don't mind creating a PNG image (with transparent background) of the bullet (or other separator), then you can use a natural space between the list items painted with this as the background.
Where the list items wrap onto the next line, the space---and thus its background---won't be rendered.
This avoids layout issues relating to the space taken up by the separator, as well as avoiding any Javascript/jQuery, taking advantage of the browser's own layout engine to do the work. You can adjust the space for the separator with the word-spacing attribute.
You'll need to ensure there is no other whitespace within the markup that might otherwise be used as the natural space. You could use a higher-res image than the 5x5 here, in conjunction with background-size, so that it still looks ok when zooomed, but note IE8 doesn't support scaling of background images. The other drawback is that if you want to change the colour you'll have to edit the PNG.
FIDDLE
Code based on modifying #bleuscyther's answer:
CSS :
ul { max-width: 700px; padding: 0; text-align: center; }
ul li { display: inline; white-space: nowrap; }
ul .separator {
word-spacing: 1.1em;
background-repeat: no-repeat;
background-position: 50% 60%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAOElEQVQI113M0Q3AIBRC0aM76P7jmHSmSj/6mibyc4EQkEEWuYtDmU1SXO1d6H7tjgupIl8+P+cD22cff9U1wbsAAAAASUVORK5CYII=);
}
HTML :
<ul>
<li>Harvard Medical School</li><span class='separator'>
</span><li>Harvard College</li><span class='separator'>
</span><li>Harvard Medical School</li><span class='separator'>
</span><li>Harvard College</li><span class='separator'>
</span><li>Harvard Medical School</li><span class='separator'>
</span><li>Harvard College</li><span class='separator'>
</span><li>Harvard Medical School</li><span class='separator'>
</span><li>Harvard College</li>
</ul>
user2511031's solution is almost ideal... it's just not a valid HTML. There should not be any SPAN outside LI, inside UL.
But it doesn't mean that there is no really ideal solution. I found one!
No need to put the spans allover and clean white-spaces in the markup. Place the needed space into the ":after" pseudo element content, apply the background image to it.
It does the same!
ul { max-width: 700px; padding: 0; text-align: center; }
ul li { display: inline; white-space: nowrap; }
ul li:after {
content: " ";
word-spacing: 2em;
background-repeat: no-repeat;
background-position: 50% 60%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAOElEQVQI113M0Q3AIBRC0aM76P7jmHSmSj/6mibyc4EQkEEWuYtDmU1SXO1d6H7tjgupIl8+P+cD22cff9U1wbsAAAAASUVORK5CYII=);
}
Here's the Fiddle
I just used text-indent to successfully style a bulleted list as follows:
HTML:
<ul class="horizontal">
<li>Payment</li>
<li>Check</li>
<li>Direct Deposit</li>
</ul>
CSS:
ul.horizontal li {
list-style-type:disc;
float: left;
text-indent:-4px;
margin-right:16px;
}
In the simplest of ways, all you would require is setting text-align: center on the ul and display: inline-block on li in your stylesheet.
You can use an image as a separator if you wish by leveraging the :after pseudo class on li.
Here's an example.
http://jsfiddle.net/caramba/tSnnP/
<div>
<ul>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
</ul>
<ul>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
</ul>
</div>
<style type="text/css">
div {
white-space: nowrap;
width: 100%;
}
span {
display:inline-block;
margin:0 5px;
}
ul {
text-align:center;
}
ul li {
display:inline;
margin:20px;
}
.hide {
display:none;
}
.icon {
position:relative;
display:inline-block;
background-position:-1000px -1000px;
background-image:url(http://www.alexander-bown.com/wp-content/uploads/2011/05/big-black-dot.jpg);
background-repeat:no-repeat;
background-size:5px 5px;
width:5px;
height:5px;
}
.icon {
background-position:0px 0px;
top:-2px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul li:first-child').children('span').addClass("hide");
});
</script>
ul li {
display: inline;
text-align: center
}
.separator {
display: inline-block;
background-color: black;
width: 5px;
height: 5px;
border-radius: 45px;
vertical-align: middle;
}
<ul>
<li>item 1</li> <div class='separator'></div>
<li>item 2</li> <div class='separator'></div>
<li>item 3</li> <div class='separator'></div>
<li>item 4</li> <div class='separator'></div>
<li>item 5</li>
</ul>
You can also build this in JavaScript using a loop and concatenating a new li for x amount of list items but seeing as your post doesnt say anything about a dynamically generated list I'll leave it just as this for now.
<table>
<tr>
<td>
<ul>
<li>First menu item</li>
</ul>
</td>
<td>
<ul>
<li>Second menu item</li>
</ul>
</td>
<td>
<ul>
<li>Third menu item</li>
</ul>
</td>
</tr>
</table>
Neither googling nor browsing in SO helped me - hope someone here can solve this :
I have the following html :
<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>
and css
ul {list-style-image:url(../img/hook.png);}
li {vertical-align:middle;color:#FFFFFF;font-size:16px;text-shadow: 0em 0.13em 0.13em #2A2A2A;font-family:Helvetica,Arial,Sans-Serif;font-weight:normal;}
the "hook.png" image is 32x35 px - but whenever I create list items, text (e.g. ABC...) will always be shown below the image. Tried line-height and those 100% thingies - but neither worked out.
Any quick help :/ ?
Try some variation of
ul{
background-image: url(../img/hook.png);
background-repeat: no-repeat;
background-position: 95% 50%;
}
Obviously the position is unlikely to fit your needs, but fiddling around with this method would be your best bet I'd say.
<html>
<head>
<style>
ul
{
list-style-image:none;
}
li
{
color:#FFFFFF;
font-size:16px;
text-shadow: 0em 0.13em 0.13em #2A2A2A;
font-family:Helvetica,Arial,Sans-Serif;
font-weight:normal;
line-height:35px;
margin-bottom:5px;
padding-left: 36px;
background-image: url('../img/hook.png');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>
</body>
</html>
Never seen any of our designers try to use the list-style-image when implementing custom icons for list, I guess this is why :)
If I have understood your problem is text seems bellow the baseline?
Try to set beelow property for your text:
padding-bottom
I came up with something like that, which may save u some time
HTML:
<ul class="rozcestnik">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
CSS:
.rozcestnik {
list-style-type: none;
padding: 0;
margin: 2.5em 2em 0;
}
.rozcestnik li:before {
background: url("icon.png") no-repeat scroll 50% 50% transparent;
content: " ";
display: block;
height: 20px;
left: -20px;
position: absolute;
top: 0;
width: 20px;
}
.rozcestnik li {
position: relative;
padding-bottom: 5px;
padding-left: 5px;
}
According to custom list-image, you'll probably just need to customize the top and size ":before" and padding of "li".
It works across all major browsers and the application IE8 and more.
Here are my <li> elements. I want them to appear left-to-right instead of top-to-bottom.
<div class="nav">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
How can I do this?
EDIT:how to control spacing between each li element and its bachground color and spacing between a element and border of li element?
i think you are looking for
li {
display:inline;
}
There's a few ways.
One way is display:inline as the other posts mention
Another way is float:left;
edit: more detail! try this out in a page
<style>
/* style 1 */
div.nav1 ul li
{
display:inline;
border: solid 1px black;
padding: 10px;
margin: 10px;
list-style-type: none;
line-height: 4em;
}
/* style 2 */
div.nav2 ul li
{
float: left;
border: solid 1px black;
padding: 10px;
margin: 10px;
list-style-type: none;
}
</style>
<h1>using display: inline;</h1>
<div class="nav1">
<ul>
<li>inline</li>
<li>inline blah bla</li>
<li>i am not so neat on</li>
<li>inline</li>
<li>wrapping and I probably</li>
<li>inline</li>
<li>need a bit of work and tweaking</li>
<li>inline</li>
<li>the "line-height" css property</li>
<li>inline</li>
<li>to make me wrap better</li>
<li>inline</li>
<li>also notice how i tend to break a line up into .. two. see? make your browser narrow.</li>
<li>inline</li>
</ul>
</div>
<hr />
<h1>using float:left;</h1>
<div class="nav2">
<ul>
<li>floated left</li>
<li>i tend to behave</li>
<li>floated left</li>
<li>better for wrapping</li>
<li>floated left</li>
<li>when the list</li>
<li>floated left</li>
<li>reaches the edge of the page</li>
<li>floated left</li>
</ul>
</div>
Try:
<style>
.nav li {display:inline;}
</style>
<div class="nav">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
The styles should really be in an external style sheet, I just put them on the page for simplicity.
You could use the float attribute:
.nav ul li{float:left;}
Just to let you know, that IE does a "step-down" thing when you float list items to the left, and I think that IE is the only browser to do that, all the others keep going straight. To have the list items goes straight across, use "display: inline" in your css instead of "float: left", this should work in all browsers this way. For more in dept explanation, check out this quick tutorial
.nav li { display: inline }
For further details and inspiration, have a look at Listamatic. They've got tons of excellent tutorials with step-by-step explanations and everything about margin, padding, and browser compatibility issues.
To answer the question after the edit:
li {
float: left;
display: block;
padding: 4px 12px; /* example spacing */
margin: 0px 4px; /* example margin */
}
Edit: You might want to apply the padding and the display:block to the <a> element so that you can click on the padding as well:
li {
float: left;
margin: 0px 4px; /* example margin */
}
li a {
display: block;
padding: 4px 12px; /* example spacing */
}
You could use display: inline, like this:
li{
display: inline;
}
Or, if you have more lists, you could assign a class to that specific list:
<ul class="navbar horizontal">
<li>Test</li>
</ul>
And then style it like:
.horizontal{
display: inline;
}