Stretch list items li to fill the width of ul
Demo
HI now you can do this
Used to display :table
and display:table-cell
as like this
Css
ul {
border:1px dotted black;
padding: 0;
display:table;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
li {
background-color: red;
display:table-cell;
}
li:nth-child(2n) {
background-color: #0F0;
}
Now define your parent display:table;
or width:100%;
and define your child display:table-cell;
Demo
Stretch li background to fill width of ul
I think this will work for you fine:
I have added this following code:
#messages li {
padding: 5px 10px;
width: calc(100% + 30px);
margin-left: -15px;
}
html,body { height: 100%; background-color: #E5E5E5;}
#nav-bar { margin-bottom: 0;}
#messages { list-style-type: none; margin: 0; padding: 0; width: 100%;}
#messages li { padding: 5px 10px; width: calc(100% + 30px); margin-left: -15px;}
#messages li:nth-child(even) { background: #88e9e1;}
#online-users { list-style-type: none; padding-left: 0;}
#online-users li:nth-child(odd) { color: #373737;}
#online-users li:nth-child(even) { color: #777777;}
#container { height: 100%;}
#middle-div { border-radius: 3px; border: 1px solid #202020;}
#chat-column { height: 65vh; border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-right: 1px solid #202020; /* Keep messages from overflowing out of rectangle */ word-wrap: break-word; /* Contain messages as a scrollable list inside the rectangle */ overflow-y: auto;}
#users-column { height: 65vh; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-left: 1px solid #202020; /* Keep usernames from overflowing out of rectangle */ word-wrap: break-word; /* Contain usernames as a scrollable list inside the rectangle */ overflow-y: auto;}
#bottom-div { margin-top: 15px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><div class="container" id="container"> <div class="row" id="top-div"> <!-- The users username --> <h3 class="text-primary"> Logged in as: <i><b><span id="username"><%= loggedInUser.username %></span></b></i></h1> </div> <div class="row" id="middle-div"> <div class="form-group" id="chat-and-users"> <div> <div class="col-xs-9 bg-info" id="chat-column"> <!-- Chat Column --> <ul id="messages"> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> </ul> </div> <div class="col-xs-3 bg-success" id="users-column"> <!-- Users Column --> <h4><b>Online Users:</b></h4> <ul id="online-users"> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> </ul> </div> </div> </div> </div> <div class="row" id="bottom-div"> <form action="" id="input-button-form"> <div class="form-group"> <input type="text" id="message-input" autocomplete="off" class="form-control" placeholder="Type a message..."> </div> <button type="submit" id="button-send" class="btn btn-primary">Submit</button> </form> </div></div>
how to make li of ul width stretch the whole screen
Maybe something you are looking for
body { margin:0;}
.dropdown-btn { width: 100%; height: 50px; background: white; line-height: 50px; display: none;}
nav { width: 100%; height: 50px; background-color: #d60d8c; margin-bottom: 1px; position: sticky; top: 0; padding: 0px 0px; border: none;}
ul { padding-left: 0; position: relative; list-style: none; margin-bottom: 0;}
nav:hover { height: 50px;}
.navbar-tab { display: block;}
.hover-list { position: fixed; max-height: 0; transition: max-height 1s; padding: 0; width: 100vw; overflow: hidden; left: 0; top: 66px;}
.hover-list > li { width: 100%;}
.navbar-tab-1 { background: #d60d8c; float: left; border: none;}
.navbar-tab-1+.navbar-tab-1 { border-bottom: none;}
.navbar-tab { padding-left: 20px; display: block;}
.navbar-tab { max-width: 1240px;}
.navbar-tab-1 { padding-right: 68px; width: auto;}
.hover-list li { background-color: #e2e2e2; border-bottom: 1px white solid; font-size: 15px; text-indent: 20px; height: 35px; line-height: 35px; border-top: none; float: left;}
ul li ul li { display: block;}
ul li { font-size: 19px;}
ul > li:hover ul { max-height: 500px;}
<nav id="navbar"> <div class="dropdown-btn">Go To...</div> <ul class="navbar-tab"> <li class="navbar-tab-1 selected">Test1</li> <li class="navbar-tab-1 select">Test2 <ul class="hover-list select"> <li><a>Item1</a></li> </ul> </li> </ul></nav>
ul not stretching width to fill div's space
For dynamic space filling layout, you will have to look at using CSS flexbox. Most modern browsers in use today actually support it (85% unprefixed, 97% global), so you can treat it as a graceful degradation for users on browsers that do not, or progressive enhancement for users on browsers that do ;)
All you need to change is the following:
- Use
display: flex
on the<ul>
element, and allowing wrapping within it by settingflex-wrap: wrap
- Ditch
float: left
on the inner<li>
element. Useflex-grow: 1
to allow them to fill up remaining space on each row. - For a better visual effect, use
text-align: center
on the nested<a>
element so that months appear visually centered in all links.
.wrapper { width: 90%; height: auto; margin: 10px auto 10px auto; border: 2px solid #000000; background-color: #0099cc;}#menu { background: #ffffff; margin-bottom: 50px;}#menu ul { list-style: none; margin: 0; padding: 0; line-height: 1; /* Added the following for flexbox */ display: flex; flex-wrap: wrap;}#menu ul:after { content: ' '; display: block; font-size: 0; height: 0; clear: both; visibility: hidden;}#menu ul li { display: block; padding: 0; /* Added the following for flexbox */ flex-grow: 1;}#menu ul li a { color: #000; text-decoration: none; display: block; padding: 15px 25px; font-family: 'Work Sans', sans-serif; font-size: 1.5em; font-weight: 500; position: relative; -webkit-transition: color .25s; -moz-transition: color .25s; -ms-transition: color .25s; -o-transition: color .25s; transition: color .25s; /* Added the following for flexbox */ /* So that text appear visually centered */ text-align: center;}#menu ul li a:hover { color: #000;}#menu ul li a:hover:before { width: 100%;}#menu ul li a:before { content: ''; display: block; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #000; -webkit-transition: width .25s; -moz-transition: width .25s; -ms-transition: width .25s; -o-transition: width .25s; transition: width .25s;}#menu ul li.last > a:after,#menu ul li:last-child > a:after { display: none;}#menu ul li.active a { color: #000;}#menu ul li.active a:before { width: 100%;}
<div class="wrapper"> <div> <h1>Page title</h1> </div> <div id="menu"> <ul> <li><a><span>January</span></a> </li> <li><a><span>February</span></a> </li> <li><a><span>March</span></a> </li> <li><a><span>April</span></a> </li> <li><a><span>May</span></a> </li> <li><a><span>June</span></a> </li> <li><a><span>July</span></a> </li> <li><a><span>August</span></a> </li> <li><a><span>September</span></a> </li> <li><a><span>October</span></a> </li> <li><a><span>November</span></a> </li> <li><a><span>December</span></a> </li> <li><a><span>Spring</span></a> </li> <li><a><span>Summer</span></a> </li> <li><a><span>Autumn</span></a> </li> <li><a><span>Winter</span></a> </li> </ul> </div></div>
Stretching the ul-li menu with padding to fit the full width
The following changes will make the list-items expand to fill the container.
ul {
display:table;
width:100%;
}
li {
display:table-cell;
}
a {
display:block
}
The one caveat is that display:table-cell and display:table are not supported natively in IE6/7 so if you need to support those browsers then you will need another solution. With IE6 usage down to just 7.1% and IE7 usage at 2.54%, I know fewer and fewer designers are supporting them.
How to make an inline ul stretch full width of container
#main_navigation ul li {
display: inline-block;
font-size:24px;
}
#main_navigation ul li a {
text-decoration: none;
padding: .2em 1em;
color: #cbc19e;
background-color: #322918;
width: 200px;
display: block;
}
Change the display
attribute to inline-block
and block
respectively, and set width
to whatever you want.
Making an unordered list stretch horizontally so as to always fill up a div
Try this
ul { padding:0; margin:0; white-space:nowrap; }
li { width: 100%; list-style-type:none; display:inline-block; }
or
ul {
width: 100%;
display: table;
table-layout: fixed;
}
ul li {
display: table-cell;
width: auto;
text-align: center;
}
Related Topics
Site 5X Faster via Mod_Rewrite, But CSS Images Are Broken
Twitter Bootstrap - Position Issue with Row-Fluid
Scss/Sass to CSS in Special Folder with PHPstorm 7 File Watcher
CSS: Possible to "Push" Webkit Scrollbars into Content
CSS: Series of Floated Elements Without Wrapping But Rather Scrolling Horizontally
Font Awesome Animated Spinner Through Background
Can't Apply Width and Height to -Webkit-Scrollbar Using CSS
Positioning a Mapbox/Leaflet Map Inside a Container Div
What Does The 'P-N' and Its Variants Represent in Bootstrap V4
CSS Text-Align: Center; Is Not Centering Things
Overriding Bootstrap Table-Striped CSS
Background Image Stretch Y-Axis Only, Keep Repeat-X
How to Hide One Column from Grid in Bootstrap Mobile Version
What's The Difference Between Line-Height:1.5 and Line-Height:150% in CSS