I have <ul> list and inside <li> i have link <a href="...">
I want the <li> not to be influenced by the content and have fixed size.
My CSS
ul.files {
display: inline-block;
padding: 0;
margin: 0 auto;
}
ul.files li {
display: inline;
}
ul.files li a {
color: black;
float: left;
padding: 8px 15px;
text-decoration: none;
border: 1px solid #ddd;
margin: 0 3px;
background-color: #ffffff;
}
My HTML
<ul class="files">
<li>
<a id="some_id" href="http">123</a>
</li>
</ul>
To be able to set fixed width and height to <li> you need to change display: inline; to inline-block
ul.files li {
display: inline-block;
width: 150px;
height: 150px;
}
To center text
To center content of li you can use display: inline-flex
ul.files li {
display: inline-flex;
justify-content: center;
align-items: center;
width: 150px;
height: 150px;
}
Related
Simple question (snippet below):
<ul> with display: flex
each <li> should have the same size and together must occupy the full width of the <ul>
each <li> has a <a> which the content may have 1 or 2 lines of text.
each <li> has height set to auto to adjust to the <a> content
My problem:
I need the "one-line" links to auto expand to the height of the "two-line" links. Setting height: 100% doesn't work because their parent height it's intentionally set to auto to adjust for content.
But in some cases I'll get two-line links, and some cases all will be one-line. So I need the one-line links to auto-expand when that happens.
How is this possible?
#root {
width: 140px;
box-sizing: border-box;
}
ul {
display: flex;
justify-content: space-between;
margin: auto;
padding: 0;
}
li {
flex-grow: 1;
flex-basis: 30px;
list-style-type: none;
display: inline-block;
border: 1px dotted blue;
height: auto;
}
a {
cursor: pointer;
border: 1px dotted green;
display: inline-block;
background-color: lightblue;
padding: 8px 0px;
}
<div id="root">
<ul>
<li><a>Link 1</a></li>
<li><a>Long Link 2</a></li>
</ul>
</div>
You don't need to use inline-block with flex. Just use display: flex for li and display: block for a. Finally, add the width: 100% for a. It seems match your requirement.
#root {
width: 140px;
box-sizing: border-box;
}
ul {
display: flex;
justify-content: space-between;
margin: auto;
padding: 0;
}
li {
flex-grow: 1;
flex-basis: 30px;
list-style-type: none;
display: flex;
border: 1px dotted blue;
height: auto;
}
a {
cursor: pointer;
border: 1px dotted green;
display: block;
background-color: lightblue;
padding: 8px 0px;
width: 100%;
}
<div id="root">
<ul>
<li><a>Link 1</a></li>
<li><a>Long Link 2</a></li>
</ul>
</div>
you can omit padding from top and bottom of the anchor and use height 100% a{height: 100%;}
#root {
width: 140px;
box-sizing: border-box;
}
ul {
display: flex;
justify-content: space-between;
margin: auto;
padding: 0;
}
li {
flex-grow: 1;
flex-basis: 30px;
list-style-type: none;
display: inline-block;
border: 1px dotted blue;
height: auto;
}
a {
cursor: pointer;
border: 1px dotted green;
display: inline-block;
background-color: lightblue;
height: 100%;
}
<div id="root">
<ul>
<li><a>Link 1</a></li>
<li><a>Long Link 2</a></li>
</ul>
</div>
I'm having trouble displaying my child div tags side-by-side while the parent div tag is display flex, if anyone can show me how to get this to work, that would be great! Here's my code sample:
css
.wrapper{
z-index: +1;
display: flex;
flex-direction: column;
height: 100vh;
align-items: baseline;
justify-content: space-around;
}
.wrapper .logo{
outline: 1px solid #fff;
width: 400px;
height: 150px;
}
.wrapper .logo img{
width: 100%;
}
.wrapper .discription{
width: 320px;
outline: 1px solid #fff;
}
.wrapper .discription h1{
color: #fff;
padding: 0;
margin: 0;
text-transform: uppercase;
}
.wrapper .links{
outline: 1px solid #fff;
}
.wrapper .links nav ul{
list-style-type: none;
list-style: none;
padding: 0;
margin: 0;
}
.wrapper .links nav ul li{
display: block;
}
.wrapper .links nav ul li a{
font-size: 20px;
color: #fff;
padding: 10px;
display: block;
text-transform: uppercase;
text-decoration: none;
}
html
<div class="wrapper">
<div class="logo">
<img src="images/fire-engine.png" draggable="false">
</div>
<div class="discription">
<header>
<h1>Best non-host mw2 menu cheat engine [cex/dex]</h1>
</header>
</div>
<div class="links">
<nav>
<ul>
<li>home</li>
<li>pricing</li>
<li>support</li>
<li>login</li>
</ul>
</nav>
</div>
</div>
what I'm trying to do, similar to this:
Just keep display: flex and remove flex-direction: column in your .wrapper because flex-direction by default is row when you have display: flex.
.wrapper{
z-index: +1;
display: flex;
height: 100vh;
align-items: baseline;
justify-content: space-around;
}
https://jsfiddle.net/nL27af3z/1/
I am using an inline list as a nav menu, and I would like the hyperlink/list item to take up the full height of the container with the label vertically positioned in the center of the container. Here is what I have:
#top-nav-container {
font-size: 14px;
width: 100%;
height: 50px;
overflow: hidden;
top: 0;
left: 0;
position: fixed;
z-index: 500;
background: #3498db;
}
#top-nav-container .nav-contents {
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
#top-nav-container .nav-left {
width: 175px;
}
#top-nav-container .nav-mid {} #top-nav-container .nav-right {
margin-left: auto;
text-align: right;
width: 250px;
}
#top-nav-container .top-nav-logo {
max-height: 35px;
float: left;
}
#top-nav-container ul {
margin: 0 0 0 30px;
padding: 0;
float: left;
list-style: none;
display: flex;
/* Removes whitespace between li elements */
flex-direction: row;
align-items: center;
}
#top-nav-container ul li {} #top-nav-container li a {
text-decoration: none;
background: red;
border-right: 1px solid #fff;
color: #fff;
padding: 0 12px;
}
<header id="top-nav-container">
<div class="container nav-contents">
<div class="nav-left">
<a href="#" title="Home">
<img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png" alt="Home" class="top-nav-logo" />
</a>
</div>
<div class="nav-mid">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
<div class="nav-right">
Stuff here...
</div>
</div>
</header>
Any other suggestions you have with any of this is greatly appreciated.
You need to add both height and line-height to the links, and also make sure they are either display: block or display: inline-block. Note that inline-block would be preferred:
#top-nav-container li a {
height: 50px;
line-height: 50px;
display: inline-block;
}
Note that on small screens, the Stuff Here... div would get cut off due to having a current width of 250px. Simply turn this down to say 50px (or however wide your container would actually be):
#top-nav-container .nav-right {
width: 50px;
}
I've created a fiddle showing this here.
Hope this helps! :)
You need to modify your CSS a little, see the following snippet:
#top-nav-container {
font-size: 14px;
width: 100%;
height: 50px;
overflow: hidden;
top: 0;
left: 0;
position: fixed;
z-index: 500;
background: #3498db;
}
#top-nav-container .nav-contents {
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
#top-nav-container .nav-left {
width: 175px;
}
#top-nav-container .nav-mid {
/* all below rules were added*/
position: absolute;
line-height: 50px;
height: 100%;
left: 50%;
transform: translateX(-50%);
}
#top-nav-container .nav-right {
margin-left: auto;
text-align: right;
width: 250px;
}
#top-nav-container .top-nav-logo {
max-height: 35px;
float: left;
}
#top-nav-container ul {
margin: 0 0 0 30px;
padding: 0;
float: left;
list-style: none;
display: flex;
/* Removes whitespace between li elements */
flex-direction: row;
align-items: center;
}
#top-nav-container ul li {} #top-nav-container li a {
text-decoration: none;
background: red;
border-right: 1px solid #fff;
color: #fff;
padding: 0 12px;
/* all below rules were added*/
height: 50px;
line-height: 50px;
display: inline-block;
}
<header id="top-nav-container">
<div class="container nav-contents">
<div class="nav-left">
<a href="#" title="Home">
<img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png" alt="Home" class="top-nav-logo" />
</a>
</div>
<div class="nav-mid">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
<div class="nav-right">
Stuff here...
</div>
</div>
</header>
I need to properly skin a menu/tree like structure.
Each item is composed by three elements: two floats (one left and one right) and the last non-floated to fill the remaining space automatically expanding the container when possible.
In the first level all renders properly but on sub-levels the width of container is too small.
NOTE: I need each level ul container will be independently sized based on its content.
HTML example structure:
<ul>
<li>
<div class="link">
<span></span>
<span>3434</span>
<span>Item 1</span>
</div>
<ul>
<li>
<div class="link">
<span></span>
<span>123</span>
<span>Item 1.2</span>
</div>
</li>
<li>
<div class="link">
<span></span>
<span>312</span>
<span>Item 1.2342342</span>
</div>
</li>
<li>
<div class="link">
<span></span>
<span>12</span>
<span>Item 1.2234123</span>
</div>
</li>
</ul>
</li>
<li>
<div class="link">
<span></span>
<span>3453</span>
<span>Item 2123123123123123123</span>
</div>
</li>
<li>
<div class="link">
<span></span>
<span>34534</span>
<span>Item asdasdasd</span>
</div>
</li>
</ul>
CSS:
ul {
position: absolute;
background: white;
border: 1px solid black;
overflow: visible;
margin: 0;
padding: 0;
}
li {
position: relative;
margin: 0;
padding: 0.1em 0.5em;
}
ul>li>ul {
left: 100%;
}
.link {
display;
block;
position: relative;
}
.link>span:nth-child(1) {
display: block;
float: left;
width: 1em;
height: 1em;
margin-right: 0.25em;
background: cyan;
}
.link>span:nth-child(2) {
display: block;
float: right;
height: 1em;
margin-left: 0.25em;
background: red;
color: white;
}
.link>span:nth-child(3) {
display: block;
white-space: nowrap;
overflow: auto;
}
Here a jsfiddle to better show the problem
You can increase the width of the .ul>.li>.ul element:
ul>li>ul {
left: 100%;
width:100%;
}
This will make it increase to be the same width as the top level menu:
https://jsfiddle.net/dxr76e1z/1/
You could render inner <ul> as a table and it will autosize to fit its contents:
ul>li>ul {
left: 100%;
display: table;
}
Finally I have found the solution using flexbox model. This method preserve also jQuery animations.
Only CSS update is needed:
ul {
display: block;
position: absolute;
list-style: none;
background-color: orange;
border: 1px solid red;
padding: 0.2em;
}
li {
display: block;
}
ul>li>ul {
left: 100%;
}
.link {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
margin: 0.2em;
}
.link>span {
display: block;
align-self: auto;
}
.link>:nth-child(1) {
flex-shrink: 0;
width: 1em;
background-color: cyan;
margin-right: 0.25em;
}
.link>:nth-child(2) {
order: 1;
flex-shrink: 0;
background-color: red;
margin-left: 0.25em;
white-space: nowrap;
color: white;
}
.link>:nth-child(3) {
flex-basis: 100%;
flex-shrink: 1;
background-color: yellow;
white-space: nowrap;
}
Here the updated jsfiddle.
flexbox should make things a lot simpler it seems, but I can't seem to get the text links and images in this menu to align vertically. The text links and images are centered vertically and horizontally instead. What's missing? I'm probably also over doing it as if I were using tables and vertical-align. I want everything to align to the bottom.
* {
padding: 0;
margin: 0;
}
header > div {
display: flex;
position: relative;
}
header > div > a {
border: solid 1px #000;
float: left;
align-self: flex-end;
height: 279px;
line-height: 279px;
}
header > div > ul {
border: solid 1px #000;
float: left;
align-self: flex-end;
height: 279px;
line-height: 279px;
}
header .menu li {
display: inline-block;
float: left;
height: 279px;
line-height: 279px;
}
header .menu li a {
display: block;
align-self: flex-end;
height: 279px;
line-height: 279px;
}
<header>
<div>
<a href="#">
<img src="http://eu2013.ie/media/eupresidency/content/imagegalleryitems/twitter-bird-blue-on-white-small.png" />
</a>
<ul class="menu">
<li>A</li>
<li>B</li>
<li style="background: url('http://printready.co/wp-content/uploads/2012/08/facebook-like-icon-300x279.png') no-repeat; width: 300px; height: 279px;"></li>
</ul>
</div>
</header>
https://jsfiddle.net/rpbwdvxe/1/
Set flex on header > div's children, and align-self on its grandchildren:
header > div {
display: flex;
}
header > div > * {
display: flex;
}
header > div > * > * {
align-self: flex-end;
}
Working Fiddle
Try this
header > div > a {
border: solid 1px #000;
float: left;
height: 110px;
line-height: 110px;
display: table-cell;
vertical-align: middle;
}