Stretch List Items <Li> to Fill The Width of <Ul>

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:

  1. Use display: flex on the <ul> element, and allowing wrapping within it by setting flex-wrap: wrap
  2. Ditch float: left on the inner <li> element. Use flex-grow: 1 to allow them to fill up remaining space on each row.
  3. 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



Leave a reply



Submit