I'm using third party libraries like Kendo which output various types of HTML elements when they render.
So you might end up with a scenario such as this:
<ul>
<li>
<label>label text</label>
<div>muli select widget</div>
<span>date selector</span>
</li>
</ul>
NB! Assume I don't have control over the HTML rendered from these widgets/third party tools.
The problem is vertical alignment for the scenario above. I've created a JSFiddle which shows how the label doesn't vertically align properly. See here:
http://jsfiddle.net/tMJFF/
How would I get all three these elements to vertically align perfectly?
Use inline-block property on all elements
label,
.div-input,
.span-input{
display: inline-block;
vertical-align: middle;
}
http://jsfiddle.net/6vQ4Q/
You mentioned Kendo, so I'd recommend using whatever selectors they have decorating the ul and do something like :
ul.kendo-selector-class-of-choice li * {
vertical-align: middle;
display : inline; /* for lte IE7 only */
}
Since you aren't in control of the elements being created, this could change with different implementations/version updates of the decorating client side library (in this case Kendo). The * covers that and although arguably a hungry selector its scope is limited by the .kendo-selector-class
The below works in Chrome and IE10, but jsfiddle a bit tricky to browser test for IE8 since it doesn't render properly itself... but if you do test further you'd find you'll have to use something like display:inline if you're going down to the lovely land of IE7-.
http://jsfiddle.net/tMJFF/11/
Simply add vertical-align:middle;
Here is referenced Fiddle
label {
vertical-align:middle;
line-height:20px;
border:1px solid blue;
}
.div-input {
vertical-align:middle;
border:1px solid black;
margin-right:20px;
display:inline-block;
height:20px;
width:100px;
box-model:collapse-box
}
.span-input {
vertical-align:middle;
border:1px solid black;
display:inline-block;
height:20px;
width:100px;
}
label {
line-height:20px;
border:1px solid blue;
vertical-align:top;
}
vertical align all elements in li to middle.
ul li *{
vertical-align:middle;
}
vertical-align css property aligning your tags vertically so simply use :
label,div,span{
vertical-align :middle
}
DEMO
Related
I want to make the horizontal boxes with the size of 200 x 200 pixel each. I decide to use the ul li. and you guys know well that I must apply the float:left attribute to the li tag to make it horizontal.
My problem is that when I apply the float:left to the li element, all content in li completely breaks its container. I noticed this because I append the border style to the main container and all the content is in the new line below the main container.
Here is my code
HTML :
<div class="content-box">
<h3 class="box-header">Recent Files</h3>
<ul class="horizontal-content">
<li>
<div class="filebox">
</div>
</li>
</ul>
</div>
and the css :
.content-box {
position:relative;
width:800px;
border:1px solid #dadada;
margin-left:10px;
padding:10px;
}
ul.horizontal-content {
list-style:none outside none;
}
ul.horizontal-content > li {
float:left;
display:block;
padding:10px;
}
.filebox {
position:relative;
padding:15px;
width:200px;
height:200px;
border:1px solid #dadada;
background-color:#ecf0f1;
}
Now you see all of my code, please help me figure out what I have done wrong.
You dont really need float:left to make it horizontal. Just add display:inline-block and remove float
ul.horizontal-content > li {
padding:10px;
background:grey;
display:inline-block
}
DEMO
Add:
ul.horizontal-content {
overflow: auto;
}
here use overflow:auto and here is link of demo Click Here
I have been trying many of the solutions but they won't solve. I will create the JSfiddle for you guys to see what went wrong
Okay, all problems are solved with clear:both
I would like to do responsive centered list of boxes.
So I used text-align:center, but the last line is centered too:
http://jsfiddle.net/NWmpL/1/
I was trying to use additional wrapper which closely surrounds <li>, but only way which I know to "closely surround" content is using display:inline
http://jsfiddle.net/NWmpL/2/
but here text-align:left dont working
And width:200px should be flexible (because in my case it is browser width)
Is there any other way to "closely surround" content? Or is there any other solution ?
Thanks in advance.
More clearly: http://jsfiddle.net/NWmpL/6/
I want change this
to this
You should be using display:inline-block for layout, not display:inline.
display:inline is only intended for text content; if you have any block content inside the element and you want inline behaviour, you should always use inline-block instead.
So I went to your fiddle and changed the inline to inline-block.
Guess what.... that fixed the problem; it now looks the way you wanted.
See http://jsfiddle.net/NWmpL/8/
You could also consider using float:left to achieve this kind of layout, but since we've got a working answer with inline-block, I'll leave it at that.
Add
float:left;
to
.center li { }
FIDDLE
ul.center {
display: table;
margin: 0 auto;
width:250px; }
ul.center li {
display: block;
float: left;
width:75px; height:75px;
margin: 2px;
list-style: none;
background-color: #CCC; }
check the updated fiddle:
http://jsfiddle.net/4t6ha/2/
Try this different approach:
CSS:
.holder
{
width:300px;
border:1px dotted #000;
float:left;
padding:5px 5px;
}
ul
{
list-style:none;
}
li
{
display:inline-block;
height:30px;
width:30px;
background:#dedede;
margin:2px;
float:left;
padding:10px;
margin-bottom:5px;
}
I have a list of li's which has display:table-cell property in order to vertically center the text inside. I can not use additional markup for this. I can not use line-height as there may be multiple lines of text.
When I give the li's to display:table-cell property, they float next to each other.
How can I force them to be below each other, like they would with display:block? Or I can't?
http://jsbin.com/orijam/1/edit
li {
height:50px;
border:solid black;
vertical-align:middle;
min-width:100px;
display:table-cell;
}
ul {
border:solid red;
width:100px;
display:inline-block;
}
Set the li:s to table-row and move the table-cell styling to your a elements (assuming you have a ul li a setup)
(written on phone)
Edit: http://jsfiddle.net/Z7Sgg/
Edit2: If you're missing the a:s you could add them (or a span) using JS:
$(function () {
$('#menu li').wrapInner('<span></span>');
});
Use display:table instead of display:table-cell. It will work.
Use a span tag instead.
<li><span>li</span></li>
<li><span>li</span></li>
Here is the solution.
The HTML:
<ul>
<li><span>li</span></li>
<li><span>li</span></li>
<li><span>li</span></li>
<li><span>li</span></li>
<li><span>li</span></li>
<li><span>li</span></li>
</ul>
The CSS:
span {
height:50px;
border:solid black;
min-width:100px;
vertical-align:middle;
display:table-cell;
}
ul {
border:solid red;
width:100px;
display:inline-block;
}
ul li {display:block;}
By inseting a span tag inside the li, you can make sure that you can keep the vertical alignment middle for the li's as well as make them appear to be block.
Hope this helps now.
I wrote the following :
<ul>
<li>
<span class="filter">
<label>Name: </label><input type="text"/>
</span>
</li>
<li>
<span class="filter">
<label>Id: </label><input type="text"/>
</span>
</li>
</ul>
with the CSS as :
span.filter{
width: 50px;
}
input{
text-align: right;
}
label{
text-align: left;
}
ul{
list-style: none;
}
But the result is as shown in this fiddle. Some people suggest using floats, but why is this not working ?
It's not necessary to use float. There are many ways to make it work:
Eg.
label{
display: inline-block;
width: 200px;
text-align: left;
}
http://jsfiddle.net/krL7z/7/
If you want to achieve this effect using floats, set the display property of your labels to block, declare their width, and float them left. Then float your inputs left and us clear:left on the label elements so that they don't wind up all on one line.
so:
label{
display:block;
width:50px; /*arbitrarily determined */
float:left;
clear:left;
}
input{
float:left;
}
See the result in this fiddle.
You can also do this using display:inline-block (and hence less code) as indicated in xiaoyi's answer.
Another way is to use table cells, which (while some consider them semantically appropriate to forms) are not something you generally want to rely on for layout.
If you are in a situation where you know you are able to limit the browsers you support (Explorer higher than IE7) and all the others Firefox, Chrome, Opera, Safari ... then you can use the display:table and display:table-cell to layout the cells in table fashion - without the actual table mark-up.
span.filter
{
display:table;
}
span.filter label, span.filter input
{
display:table-cell;
}
I have an A tag button with Span inside to hold icons. It works well in all browsers. WHen I apply float:right to shift Span to the right side it also works fine in all browsers (Firefox, IE8+, etc.) except IE7 (I know... but I need to fix it).
<span> </span>Link
So, IE7 works fine when SPAN is floated left. However, once it is floated right it stretches the A tag container 100%.
I do not wish to change the structure of HTML, i.e. insert another span to handle IE7 only or move SPAN right of text, but I do want to fix it with CSS though what I tried did not work well for me yet.
Test case: http://jsfiddle.net/QeQSQ/1/ (IE7 works OK when SPAN is on left side)
Test case: http://jsfiddle.net/QeQSQ/2/ (IE7 does NOT work because SPAN is on right side and container is stretching)
Position it absolutely instead (example):
a{
display:inline-block;
border:1px solid red;
height:auto;
width:auto;
padding:5px;
position:relative;
padding-right:1em;
}
a span{
position:absolute;
right:0;
display:block;
height:14px;
width:15px;
}
Or, another [better] solution would be to add the character via :before and :after pseudo-elements (example):
Link
Link
a{
display:inline-block;
border:1px solid red;
height:auto;
width:auto;
padding:5px;
}
a.site:before {
content:"» ";
}
a.account:after {
content:" »";
}
Note: This doesn't work in IE7 at all (no additional text appears), but it also doesn't introduce any bugs.
remove the float:left and instead give the span display inline-block with an ie7 workaround:
a{
display:inline-block;
border:1px solid red;
height:auto;
width:auto;
padding:5px;
}
a span{
display:inline-block;
zoom:1;
*display: inline;
height:14px;
width:15px;
}
updated fiddle here: http://jsfiddle.net/QeQSQ/5/
also an article about the ie7 inline-block workaround: http://flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html