I'm trying to use flexbox on my <ul> so I can align them next to eachother. When I use this display:flex; flex-direction: row; on my <ul> it will also effect the child (in this case all the <li>)
I tried giving the <li> a display:flex; aswell and flex-direction: column; but this did not help.
How can I achieve what I'm trying to do here?
Look at my jsFiddle for a demo.
If you want each <ul> displayed as a column next to each-other, you can wrap all of your <ul> inside of a div like so:
div {
display: flex;
}
ul {
display: flex;
flex-direction: column;
}
<div>
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
<ul>
<li>Best 1</li>
<li>Best 2</li>
<li>Best 3</li>
</ul>
</div>
Related
I'm trying to create a "dropright" css but I'm unable to make the nested ul to behave well
this is my mark up
.container{
display: flex;
position: relative;
}
.container: first-child{
left:0;
margin-left:0px;
}
.ul-items{
list-style: none;
position: absolute;
top: 0;
left: 100px;
width: 100px;
}
<div class="container">
<ul class="ul-items">
<li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<ul class="ul-items">
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
</ul>
</li>
</ul>
</div>
This comes out the way I want but, I can't set the margin of the first ul so as not to have the 100px what am I doing wrong?
here is the pen:
codepen
Edit
I have solved this problem, now I have a nasty case of <li> with no content and setting border bottom exposes it.
** Edit **
How I want it to dislay
To resolve your query, Flexbox is very useful for a responsive design and adjusting multiple components inside a div container. You just have to add a few more properties to have the configuration you wish for.
You can try using the three <ul> unordered lists under the parent container.
HTML:
<form action="/my-handling-form-page" method="post">
<div class="container">
<ul class="ul-items">
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
</ul>
<ul class="ul-items">
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
</ul>
<ul class="ul-items">
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
</ul>
</div>
</form>
CSS:
*{
margin:0;
padding: 0;
}
.container{
display: flex;
flex-direction: row;
justify-content:flex-start;
align-items: center;
}
.container:first-child{
margin-left:40px;
}
.ul-items{
list-style: none;
margin-right: 60px;
}
Flexbox provides a lot of other options too like justify-content: space-around or justify-content: space-evenly etc. If you are more interested in learning about flexbox, you can use https://flexboxfroggy.com/ game to learn flexbox in a fun way. It's one of my favourites and fun way to learn Flexbox.
I have tried and researched many ways but I couldn't find out how to align unordered list in center. it seems like the bullets are not connected to the text and stay still.
here is the html code:
<ul id="facts">
<li>fact 1</li>
<li>fact 2</li>
<li>fact 3</li>
</ul>
and this is the css code:
#facts {
text-align: center;
}
the result will be like
You can use list-style-position: inside; to set the bullets in front of the text like this:
#facts {
text-align: center;
list-style-position: inside;
}
<ul id="facts">
<li>fact 1</li>
<li>fact 2</li>
<li>fact 3</li>
</ul>
You can put your Unordered List in an element with the class of .container and define .container like this:
.container{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
}
<div class="container">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Set</li>
</ul>
</div>
I'm trying to create a mega-menu. I'm using a list element and some elements have divs inside.
This is what my HTML looks like:
<li class="list-item">
Marchés
<div class="sub-menu-wrap">
<ul class="sub-menu">
<li>Marché 1</li>
<li>Marché 2</li>
<li>Marché 3</li>
<li>Marché 4</li>
<li>Marché 5</li>
<li>Marché 6</li>
</ul>
</div>
</li>
The li with .list-item class has position:relative; and the .sub-menu-wrapper has position:absolute; and width:100%;
i need the .sub-menu-wrap to have a full screen width but it's only taking the li.list-item width (screenshot below).
I also tried left:0;right:0; for .sub-menu-wrap but nothing changed..
When recreating your code, the element positioned absolute does in fact take up 100% width when the width is set to 100%. Double check your syntax. See my snippet below, the element positioned absolute is taking up the full width.
.list-item{
position: relative;
background: lightcoral;
width: 100px;
}
.sub-menu-wrap{
position:absolute;
background-color: lightblue;
width: 100vw;
}
<li class="list-item">
Marchés
<div class="sub-menu-wrap">
<ul class="sub-menu">
<li>Marché 1</li>
<li>Marché 2</li>
<li>Marché 3</li>
<li>Marché 4</li>
<li>Marché 5</li>
<li>Marché 6</li>
</ul>
</div>
</li>
I am using CSS selectors to try to hide everything in my .text-wrap div except for the first UL and the first H3, however the selectors I have below are not working as expected.
CSS:
.text-wrap {
>*:not(h3:first-of-type):not(ul:first-of-type) {
display: none;
}
}
HTML:
<div class="text-wrap>
<h3>My h3</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>paragraph</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
As stated by the specification, the :not() pseudo class currently only accepts simple selectors:
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
This means that :not(h3:first-of-type) currently doesn't work since h3:first-of-type is not a simple selector.
6.6.7. The negation pseudo-class
The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument.
To work around this, you can break up your selector and hide all the elements except the first of each type and then use a separate selector to hide everything except h3/ul elements:
.text-wrap > :not(:first-of-type),
.text-wrap > :not(ul):not(h3) {
display: none;
}
.text-wrap > :not(:first-of-type),
.text-wrap > :not(ul):not(h3) {
display: none;
}
<div class="text-wrap">
<h3>My h3</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>paragraph1</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>paragraph2</p>
</div>
Alternatively, in your case, it seems like the easiest solution is to select all the sibling elements after the first ul element using the general sibling combinator, ~:
.text-wrap > ul:first-of-type ~ * {
display: none;
}
.text-wrap > ul:first-of-type ~ * {
display: none;
}
<div class="text-wrap">
<h3>My h3</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>paragraph1</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>paragraph2</p>
</div>
You can do this with the css adjacent selector:
/* hide the elements */
.text-wrap p,
.text-wrap ul {
display: none;
}
/* show the element after the h3 */
.text-wrap h3 + ul {
display: initial;
}
<div class="text-wrap">
<h3>My h3</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>paragraph</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
I have a menu element like:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
</ul>
</li>
<li>Item 4</li>
</ul>
The element is positioned absolutely. How can I center it without knowing its width (number of parent elements might change).
Regards,
Dave
I think what you're after is possible if you have a parent element to the ul:
<div class="example">
<ul>
<!-- lots of li's -->
</ul>
</div>
Then use the old school text-align trick that was used to center layouts:
.example {
text-align: center;
}
.example ul {
text-align: left;
display: inline-block;
}
See: http://jsfiddle.net/chippper/WK5Z4/