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/
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'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'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>
i need to create UL list in html 4X2
something like this
item1 | item2 | item3 | item 4
item5 | item6 | item 7| item 8
Is that possible to do with ul list?
I know how to create klasic licst.. like
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
You can use the float CSS property to achieve this.
A JSFiddle demo.
li {
float: left;
width: 25%;
}
<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>
Just show li element inline and make two separate lists:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
And the CSS:
li { display:inline; }
If you want more control, you can put inline-block and set width, margin, etc.
JS Demo
Like this
demo
css
ul{
margin:0;
padding:0;
}
li{
display:inline-block;
border:1px solid black;
margin:5px;
}
You can add max-width to UL to width that is not more than four ite
I have an img floated to the left followed by a long ul that should render to the right of the img then continue below it. It does this, but the portion of the ul next to the img it all left aligned and loses its indentation.
Here is a minimum case example. (also in jsbin)
<html>
<head>
</head>
<body>
<div style="float:left"><img src="http://i410.photobucket.com/albums/pp190/FindStuff2/Photography/Winter/winter.jpg" width="200" height="150" /></div>
<ul>
<li>Level 1</li>
<li>Level 1</li>
<li>
<ul>
<li>Level 2</li>
<li>Level 2</li>
<li>Level 2</li>
<li>Level 2</li>
</ul>
</li>
<li>Level 1</li>
<li>Level 1</li>
<li>Level 1</li>
<li>Level 1</li>
</ul>
<div style="clear:both"><!-- --></div>
More content More content More content More content More content More content More content More content More content More content More content
</body>
</html>
I appreciate your help.
Try this:
/* add some margin-right for some white space between the list and image */
div {margin-right:12px; float:left;}
/* add overflow and set the list-style attributes */
li {overflow:hidden; list-style:inside square none;}
css:
div {margin:0 10px 5px 0; float:left;}
ul{
padding:0px;
list-style-type:none;
margin:0px;
}