Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I fit the width of li's in ul?
    primarykey
    data
    text
    <p>I have a ul of width 600px and I have 4 li's which donot take up the entire 600px. How do I automatically fit the li's such that they take the entire 600px? I do not want to hardcode the width's of li's as I use the classes at various locations.Below is the screenshot, I am trying to set the menu "Newest, Hot Votes Active" fit the entire ul. <img src="https://i.stack.imgur.com/1t1lX.png" alt="Sample screenshot"></p> <pre><code> #content-tabs { background-color: #78ae09; float: left; /* LTR */ margin: 20px 0; padding: 0; -moz-box-shadow: 0px 2px 3px #c4c4c4;-webkit-box-shadow: 0px 2px 3px #c4c4c4;box-shadow: 0px 2px 3px #c4c4c4; } #content-tabs ul.primary, #content-tabs ul.secondary { /* border-bottom: 1px solid #000;*/ clear: both; float: left; /* LTR */ margin: 0; padding: 7px 10px 0px 0px; width:100%; } #content-tabs ul.secondary { border-bottom: 1px solid #555; margin-top: 10px; text-transform: lowercase; } #content-tabs ul.primary li, #content-tabs ul.secondary li { border-style: none; display: inline-block; float: left; /* LTR */ list-style: none; margin: 0 10px; padding: 0; white-space:nowrap; } #content-tabs ul.primary li a:link, #content-tabs ul.primary li a:visited, #content-tabs ul.secondary li a:link, #content-tabs ul.secondary li a:visited { background-color: transparent; border: none; color: #fff; float: left; /* LTR */ font-weight: bold; margin: 0; padding: 3px 0 6px 0; text-decoration: none; white-space: nowrap; } #content-tabs ul.secondary li a:link, #content-tabs ul.secondary li a:visited { color: #555; } #content-tabs ul.primary li a.active:link, #content-tabs ul.primary li a.active:visited { color: #fff; padding-bottom: 2px; } #content-tabs ul.secondary li a.active:link, #content-tabs ul.secondary li a.active:visited { color: #fff; padding-bottom: 2px; } #content-tabs ul.primary li a:hover, #content-tabs ul.primary li a:focus, #content-tabs ul.secondary li a:hover, #content-tabs ul.secondary li a:focus { color: #fefefe; padding-bottom: 2px; font-weight:bold; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload