This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 2 years ago.
In my application I have the following code
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search for something..." data-inset="true">
</ul>
<span class="material-icons"> filter_alt </span>
These 2 elements are currently on 2 sperate rows. How can I make them in the same horizontal row?
<ul> is a block level element. Means it will be displayed below other elements and the following element will be displayed below the unordered list. If you change the ul to an inline-block element, it will go inline with other inline elements such as a link a.
ul {
display: inline-block;
list-style: none;
}
<ul>
<li>List Item</li>
</ul>
Link
Related
This question already has answers here:
Why is my background color not showing if I have display: inline?
(6 answers)
Inline container isn't showing background color when wrapping elements [duplicate]
(1 answer)
Closed 1 year ago.
In this little example I have attached I expected the yellow background to extend to the li tags that are children of the ul but this seems not to be how it behaves when display:inline is applied to the ul tag.
What's the logic behind this behaviour?
P.D. I know how to fix this issue. I could make the ul tag an inline block, but this is not what this question is about. I exactly thought that the below code would have behavef as if display-block was applied. In the end, you have a tag surrounding a content. display:inline makes it show in the same line but shouldn't it big as big as its content?
.li {
background-color:red;
}
.inline-ul {
display:inline;
background-color:yellow;
}
.inline-li {
/*display:inline;
background-color:green;*/
}
<html>
<head>
</head>
<body>
<nav>
<ul class="mainMenu">
<li>Item1</li>
<li class="li">
<span>Item2</span>
<span>Item3</span>
<ul class="inline-ul">
<li class="inline-li">Item11</li>
<li>Item12</li>
<li>Item13</li>
</ul>
</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</nav>
</body>
</html>
This question already has answers here:
How to dispay unordered list inline with bullets?
(13 answers)
Closed 2 years ago.
I have a similar issue to the one described here. I have an unordered list where the li tag has the display:inline property. Now the list items are being displayed one after the other on the same line, but the bullets are missing. I'd like to know the simplest way to have my elements show up both inline and with bullets.
In this Meta post the top answer says it's correct to create a new question if the technology changed. The question linked is older than Chrome, with the top answers expected to account for IE7. There have been changes in web standards since then as well. Consequently, I think the technology has changed significantly enough to warrant another question. It is likely enough that the answer to this question is different from what was posted on the previous question that even if it happens to be there some confirmation is required.
You can use display: flex:
ul {
display: flex;
justify-content: space-between;
}
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
On the unordered list element, use flexbox. On each of the list items, use margin: auto.
Here's an example:
<ul style="display: flex;">
<li style="margin: auto" > item 1 </li>
<li style="margin: auto" > item 2 </li>
</ul>
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
CSS 3 nth of type restricted to class [duplicate]
(2 answers)
Closed 5 years ago.
I have the next code:
<div id="mainContainer">
<ul>
<li class="mainclass class1-1"> </li>
<li class="mainclass class1-1"></li>
<li class="mainclass active"></li>
<li class="mainclass class1-2"></li>
<li class="mainclass class1-2"></li>
</ul>
</div>
I tried to select the second type with class1-2 with the next lines but nothing happen:
#mainContainer li[class~="class1-2"]:nth-of-type(2){right:1.7em;}
#mainContainer li[class~="class1-2"]:nth-of-type(2){right:1.7em;}
#mainContainer ul li[class~="class1-2"]:nth-of-type(2){right:1.7em;}
#mainContainer li[class*="-2"]:nth-of-type(2){right:1.7em;}
#mainContainer ul li[class*="-2"]:nth-of-type(2){right:1.7em;}
.mainclass.class1-2:nth-of-type(2){right:1.7em;}
Exist some css selector especify for this case?
I don't believe you can target the element on its own but if you only have the 2 elements with .class1-2 then you can use the following:
.mainclass.class1-2 + .mainclass.class1-2 {
right:1.7em;
}
Keep in mind this will affect additional elements that come directly after it with the same class.
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.
This question already has answers here:
Should I use <ul>s and <li>s inside my <nav>s?
(9 answers)
Closed 9 years ago.
today i wanted to have a closer look over the nav element from html5. and i've seen on most websites that the way it should be used is with an ul li inside. Well that wouldn't be very semantic because the nav element already acts like a list. Even on MDN i've seen the example using nav ul li elements. But how about just simple nav with links inside and even dropdown
<nav>
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
<a href="#" id="dropdown-menu">Dropdown
<nav class="dropdown">
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
</nav>
</a>
</nav>
Is it semantic, is it wrong ? if it's correct the way i used why everyone uses ul li elements inside of nav ?
Update: just for the example i've updated the topic and added the css and js
Javascript
$('#dropdown-menu').on("click", function(e) {
$('.dropdown').slideDown(100);
});
CSS
.dropdown {
display: none;
}
I think good practice (required for wordpress for example) is building navigation this way:
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</nav>
Always use ul, it's natural - navigation is a list.