Make list items of certain width - html

http://jsfiddle.net/SyKnv/
I am trying to get rid of the additional space after each li item, to make the blocks the same size as their content. I tried to display them as inline, but that removes the bullets.
HTML
<div>
<ul>
<li>banana</li>
<li>orange</li>
<li>cherry</li>
</ul>
CSS
div {
width: 40%;
min-height: 50%;
border:1px solid black;
}
li {
border:1px solid black;
}

As mention in my comment you have to make ul display: inline-block; like this:
ul{
display: inline-block;
}
fiddle

try this code DEMO
div{
width: 40%;
min-height: 50%;
border:1px solid black;
}
ul {
margin:0;
padding:0;
}
li{
border:1px solid black;
list-style:inside;
}

CSS
ul{
display: inline-block;
}
Inline-Block
Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc.
More Info Regarding Inline-block
Updated Fiddle

Related

How to get element to fill 100% height of parent

I have a simple horizontal menu. Using CSS display:table and display:table-cell, I've made the menu "justified". When the menu gets narrow enough, the text in some of the <a> elements wraps onto 2 lines, thereby increasing the height of those items. The rest of the unwrapped <a>elements stay at the height of 1 line of text, ruining the effect. How do I make all the <a> elements fill up 100% of the height of their containing <li>?
Limitations:
Can't use Javascript to dynamically calculate the height
Can't use Flexbox, as some supported browsers don't support Flexbox
I have an example here: http://codepen.io/anon/pen/cyJEt?editors=110 , using this code:
<ul class = "nav-mega">
<li>
Two words
</li>
<li>
More words
</li>
<li>
Word
</li>
<li>
Word
</li>
<li>
More words
</li>
<li>
End
</li>
</ul>
.nav-mega {
padding:0;
margin:0;
display: table;
width: 100%;
}
.nav-mega > li {
display: table-cell;
min-width: 10%;
background:green;
}
.nav-mega > li a {
display: block;
background:red;
outline:1px solid black;
padding:10px;
}
.nav-mega {
padding:0;
margin:0;
display: table;
width: 100%;
height:100%;
}
.nav-mega > li {
display: table-cell;
min-width: 10%;
background:green;
height:100%
}
.nav-mega > li a {
display: block;
background:red;
outline:1px solid black;
padding:10px;
height:100%
}
adding height 100% to all parents up to html will work
Just needed to shuffle where you were adding attributes.
Put the background and outline on the li instead of the a.
.nav-mega > li {
display: table-cell;
min-width: 10%;
background:green;
background:red;
outline:1px solid black;
}
DEMO

Centering UL navigation horizontally using CSS sprite background

I have a 4 element horizontal list using a sprite image as the li background that I've been trying to get centered in the footer div. At this point I think I'm just running in circles randomly changing styles trying to get it. Here's the relevent CSS and HTML:
#footer-share-links {
width:400px;
text-align:center;
margin:10px auto;
background:#FF6666;
border: 1px solid red;
height:36px;
}
#footer-share-links ul {
padding:0;
position:relative;
list-style-type:none;
}
#footer-share-links li {
margin:0 auto;
display:inline;
float:left;
text-align:center;
position:absolute;
}
#footer-share-links li, #footer-share-links a {
height:36px;
}
#ftr_facebook {left:0px;width:25px;}
#ftr_facebook {background:url('sprites/spriteGlobal.2014-0001.png') 0 0;}
#ftr_twitter {left:30px;width:26px;}
#ftr_twitter {background:url('sprites/spriteGlobal.2014-0001.png') -25px 0;}
#ftr_gplus {left:61px;width:26px;}
#ftr_gplus {background:url('sprites/spriteGlobal.2014-0001.png') -77px 0;}
#ftr_linkedin {left:93px;width:26px;}
#ftr_linkedin {background:url('sprites/spriteGlobal.2014-0001.png') -51px 0;}
The background and border on the div are just to help me see the box. The HTML is:
<div id="footer-share-links">
<ul>
<li id="ftr_facebook"></li>
<li id="ftr_twitter"></li>
<li id="ftr_gplus"></li>
<li id="ftr_linkedin"></li>
</ul>
</div>
Using this I get a centered red box from the div, but the list elements are pushed to the left edge. If I add margin:0 auto; to the UL it stays the same. If I add margin-left:100px it does move it towards center, but I don't want to use a fixed value unless I absolutely have to.
Stripped out some of the competing properties to the bare minimum.
JSfiddle Demo
CSS
#footer-share-links {
width:400px;
text-align:center; /* this centers the inline-block list items */
margin:10px auto;
background:#FF6666;
border: 1px solid red;
height:36px;
}
#footer-share-links ul {
padding:0;
position:relative;
list-style-type:none;
margin: 0;
}
#footer-share-links li {
display:inline-block;
width:26px;
height:36px;
background-image: url(http://lorempixel.com/output/abstract-q-c-25-25-6.jpg);
background-position: center;
}
Here is one way of doing it, try the following CSS:
#footer-share-links {
width:400px;
text-align:center;
margin:10px auto;
background:#FF6666;
border: 1px solid red;
height:36px;
line-height: 36px;
}
#footer-share-links ul {
padding:0;
margin: 0;
list-style-type:none;
}
#footer-share-links li {
margin: 0;
display: inline-block;
width: 50px; /* demo only */
background-color: yellow; /* demo only */
}
#footer-share-links a {
display: block; /* or inline-block */
}
Demo: http://jsfiddle.net/audetwebdesign/yN5MP/
As suggested earlier, remove any floats and absolute positioning.
For the parent container #footer-share-links, set the line-height equal to the height value, that way the vertical centering takes care of itself.
On the ul element, make sure to zero out the margins.
Finally, on the li elements, use display: inline-block so that the width is recognized.
You can use your id names to specify width's on the individual li elements as needed.
On the a elements (links), use display: block to get make the link take up the width of the li element so that the link has enough active/control area.
What you need to do:
#footer-share-links li {
/*margin:0 auto;*/
display:inline-block; // change this to inline-block
/*float:left;*/
text-align:center;
/*position:absolute;*/
}
#footer-share-links ul {
...
...
margin: 0; // add this
}
Take out those I commented out, it works

CSS display table ignores width

I have multiple li items floating left and I want to set a right border around them so that all of them get the same height for the border. Therefor I'm using the display:table; However it ignores the width of the li. How can I force to use same width for all li items?
HTML:
<ul>
<li>a</li>
<li><img src="http://farm8.staticflickr.com/7437/9982948185_19ae813ee0_n.jpg"/></li>
<li>b</li>
</ul>
CSS:
ul{
display: table;
}
ul li{
display: table-cell;
width: 50px !important;
border-right: 1px solid red;
}
Demo:
http://jsfiddle.net/xbmEQ/
You can try "table-layout: fixed"
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Your image is bigger so you are having issues. Set max-width to image:
ul li img {
max-width:100%;
}
Also use word break on li,
Demo: http://jsfiddle.net/shekhardesigner/xbmEQ/7/
You'll also need to define the width for the img tag because img tag is taking full width So you can set the image width to 50px but better way to define width 100%.
If you don't want to specify anything inside the li tag then you may set display: inline-block; overflow: hidden; to your li instead of using display: table-cell; to li
demo
Do you want to make the image 50px wide? In that case you just have to add this piece of code:
ul li img{
width: 50px;
}
http://jsfiddle.net/xbmEQ/3/
You can set the min-width of the li items so that they do not shrink below 50px.
http://jsfiddle.net/xbmEQ/5/
It keeps the heights of all the li items matching (and dynamic) as you want for matching border heights. It also keeps all the li items 50px wide unless their content exceeds 50px (like your image).
(I have not tested this in any other browser than Chrome)
not real sure what you're trying to achive but what about this fiddle
ul{}
ul li{
display: inline-block;
width: 50px;
border: 1px solid red;
overflow:hidden;
}
EDITED FIDDLE AND CSS, added height attribute.
fiddle 2.0
ul li{
display: inline-block;
height:100px;
width: 50px;
border: 1px solid red;
overflow:hidden;
}

how to center li elements as grid view's

I have the following code. It's essentially a simple grid view that uses <ul> and <li> tags. I wanted to make it responsive such that the <li> elements are always centered no matter what the width of the screen is. How can I do so? I've tried setting the padding-left and padding-right as percentages, however it doesn't work. Right now if I adjust the width of the screen it doesn't always stay centered.
Simply add text-align: center to the parent <ul>
Fiddle
I'll extend on the previous answer...
Also center the UL
#home-listing {
text-align: center;
width:80%; /*Pick Your Own Width*/
margin:16px auto;
}
http://jsfiddle.net/Zd9Gf/3/
It depends on what you mean by centered. In order to center the entire list you could do something like:
ul {
padding: 0px;
width:500px;
margin:auto;
}
See this jsFiddle.
add this class:
ul.search-results{
width:100%;
}
and update this class:
ul.search-results li {
border-right: 1px solid #cecdcb;
border-bottom: 1px solid #cecdcb;
border-top: 1px solid #fff;
list-style: none;
padding: 0;
display: inline-block;
vertical-align: top;
width:60%;
margin:0 20%;
text-align:center;
}

Centre image horizontally inside li where image wider than li

What options (if any) do I have to centre the image within the li tag? What I have is an oversized image deliberately placed into a smaller sized li. What I am trying to achieve is the image centred within the li tag ... ie so that the cropped overflow would be shared on both the left and right, not just the right. The code below is a reduced version of what I am working with.
HTML
<ul>
<li>
<img src = "http://placehold.it/400x100">
</li>
</ul>
CSS
li{
overflow:hidden;
width: 250px;
}
img {
border: 3px solid pink;
}
The codepen is here http://codepen.io/anon/pen/ebCEi. Note: I wont be able to use background images.
li {
overflow:hidden;
width: 250px;
position:relative;
height:106px;
}
img {
border: 3px solid pink;
position:absolute;
left:-75px;
}
jsFiddle example
You'll notice the left and right border on the image isn't visible because it extends beyond the viewport of the list item.
Use text-align:
li {
overflow:hidden;
text-align: center; /* <------- */
width: 250px;
}
If that doesn't work try this:
img {
border: 3px solid pink;
margin: 0 auto; /* <------- */
}
Try this:
HTML
<ul>
<li>
<img src = "http://placehold.it/400x100">
</li>
</ul>
CSS
li{
overflow:hidden;
text-align:center;
width: 250px;
}
img {
border: 3px solid pink;
margin:0 auto;
}