How do I get two buttons to appear one above the other in a span? The buttons should both be the same size also. I've tried vertical-align:middle and display:inline-block but with no success. The end goal is to have one list on the left, two buttons in the middle, and one list on the right. The buttons in the middle will be "Add" and "Remove" and move items between the two lists. I found this link but it was updated in 2004 and seems like a very poor way to do it. I've been searching for awhile and I must not be looking for the right things, so some guidance would be appreciated.
Here two buttons are aligned one above the other.
First between two lists:
http://jsfiddle.net/xGXER/
<!DOCTYPE html>
<html>
<head>
<title>Buttons in between</title>
</head>
<body>
<ul style="background: #afa; display: inline-block; width: 100px; vertical-align: top;">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
<span style="display: inline-block; width: 70px; background: #6af; vertical-align: top;">
<button style="width: 70px;">Add</button>
<button style="width: 70px;">Remove</button>
</span>
<ul style="background: #afa; display: inline-block; width: 100px; text-align: right; vertical-align: top;">
<li>Ein</li>
<li>Zwei</li>
<li>Drei</li>
<li>Vier</li>
</ul>
</body>
</html>
...and then between two spans:
http://jsfiddle.net/JtXj2/
<!DOCTYPE html>
<html>
<head>
<title>Buttons in between spans</title>
</head>
<body>
<span style="background: #f06; vertical-align: top;">Foo bar has left the building</span>
<span style="display: inline-block; width: 70px; height: 52px; background: #06f;">
<button style="width: 70px;">Add</button>
<button style="width: 70px;">Remove</button>
</span>
<span style="background: #0f0; vertical-align: top;">Bar hopping is what we do at Friday nights</span>
</body>
</html>
span { display:block; }
span button { float: left; width:100px; height:100px; margin:10px; clear:left; }
span .clearingelement { clear:left; }
The span element is an inline display element. Why not use a div element which is a block element? I don't see the point of styling a span to act like a div
Have you has only two buttons inside a <SPAN>? I guess the <SPAN> are inside a <P>, so I hope this would be what you need:
http://jsfiddle.net/Gpt6a/
This seems too simple, but - if the question actually is "How do I get two buttons to appear one above the other in a span?", then... I think this is your answer.
<span>
BUTTON 1<br />
BUTTON 2
</span>
EDIT:
Set the width of the list and float it:
<ul style="width:100px; float:left;">
<li>list item 1</li>
<li>list item 2</li>
</ul>
<span>button1<br />button2</span>
Related
I am using float right to make two links appear on the right of every list item. But they do not stick to the right side for all the list items, causing it to appear like a step. I have tried a lot of combinations from various answers on SO for about 4 days. Nothing seemed to work.
I asked this question, two days ago on SO, and did not get any response, probably because it had JSF code. So I have stripped down the html generated to the minimal code that replicates this issue.
https://jsfiddle.net/9g5h6687/10/
.labelTitleBox {
overflow: hidden;
width: 100%;
display: inline;
}
.layerPanelButton {
font-size: 18pt !important;
text-decoration: none;
color: #0092cf !important;
}
.layerPanelButtonWrap {
width: auto;
float: right;
padding-left: 4px;
padding-right: 4px;
color: #0092cf !important;
}
.label {
width: auto;
display: inline;
white-space: normal;
}
<div id="form:layerTree" class="ui-widget-content">
<ul>
<li id="form:layerTree:0">
<span class="label">
<span class="layerPanelButtonWrap">%</span>
<div class="labelTitleBox">Node 0</div>
</span>
<ul class="">
<li id="form:layerTree:0_0">
<span class="label">
<span class="layerPanelButtonWrap">=</span>
<span class="layerPanelButtonWrap">%</span>
<div class="labelTitleBox">Node 0.0</div>
</span>
</li>
<li id="form:layerTree:0_1">
<span class="label">
<span class="layerPanelButtonWrap">=</span>
<span class="layerPanelButtonWrap">%</span>
<div class="labelTitleBox">Node 0.1</div>
</span>
</li>
<li id="form:layerTree:0_2">
<span class="label">
<span class="layerPanelButtonWrap">=</span>
<span class="layerPanelButtonWrap">%</span>
<div class="labelTitleBox">Node 0.2</div>
</span>
</li>
</ul>
</li>
</ul>
</div>
You need to clear the floats because the font size of the floated items are larger than the line-height of li so they stack on each other
ul ul {clear:right;}
li:after {display:block; clear:right; content:'';}
Updated fiddle
Also, nothing to do with the problem but you have invalid html in your answer - div is not allowed to be a child element of a span
It is the wrapping element's height that causes the indent of the floating elements.
If you add a height the spans will float right as expected.
li {
height:50pt;
}
This will not fix your list completly, but it could point you in the right direction.
https://jsfiddle.net/9g5h6687/13/
I am making an image slider with jquery and for that purpose I am trying to align images in one line with li tag using css but it's not happening the way I want.
I want to slide from left to right when the first image reach in the middle then the second image comes in, this Image shows exactly what I want.
<div id="divFrame">
<ul id="ulId">
<li class="service-list"><img src="images/a.jpe"></img></li>
<li class="service-list"><img src="images/b.jpe"></img></li>
</ul>
</div>
css
#divFrame
{
width: 311px;
height: 333px;
background-color: gray;
position: relative;
margin-left: 20%;
overflow: hidden;
}
img{
float: left;
}
.liClass {
list-style-type: none;
margin-left:0px;
padding-left:0px;
display: inline-block;
}
if I remove the overflow hidden property from divFrame and decrease the divFrame then it shows images like below, and why It's creating weird gap on left and top.
if I increase the divFrame size more then these two images then it shows like that
<html>
<head>
<script src="jquery.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<html>
<body>
<div id="divFrame">
<ul id="ulId">
<li class="service-list"><img src="http://placehold.it/200x200" />
</li>
<li class="service-list"><img src="http://placehold.it/200x200" />
</li>
</ul>
</div>
</body>
</html>
Correct your markup.
there's no such thing as an </img> tag. IMG tags are self-closing. The proper way to close an img tag is to use <img src="" />.
Your CSS targets a class titled .liClass, but that class is nowhere in your posted HTML.
With cleanup, and correction, removing the CSS for the images and actually targeting the li items via a class, display: inline-block; should correct this issue. Note that I also added white-space: nowrap; to the ul CSS.
jsFiddle example
(with corrections)
I have following structure: JSFiddle Demo
HTML & CSS Code is as following:
HTML:
<ul>
<li class="test"> Hello </li>
<li class="test"> Welcome </li>
<li class="test"> Test Process </li>
<li class="test"> Text Message </li>
</ul>
CSS
ul{
width: 100%;
}
.test{
height:20px;
width:20%;
border: 1px solid black;
border-radius: 3px;
display: inline-block;
float: left;
margin-left: 5px;
text-align: center;
}
When I resize the browser the <li> tag widget structure is working fine (Not breaking) but the text inside the widget are breaking like:
My question is How can I make the text inside the widget adjustable so that It will not break.
Is there any way to fix this using only CSS ?
Provide
min-width:20%;
instead of
width:20%;
It should work..
Fiddle: http://jsfiddle.net/ZZa8j/2/
If you want it to expand accordingly, you can simply remove the explicit height and set a min-height like this.
If you want to clip the text and indicate the user that text is clipped, you can use the text-oveflow property like this.
.test{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
/*other styles*/
}
If you actually want the content to expand as much as possible and scoll if not, you could use Paulie_D's table-cell approach like he mentioned in comments.
Your images are blocked by my proxy so I'm not sure if it's the answer that you need, but you can avoid break between 2 words with the css property white-space.
white-space:nowrap;
see fiddle : http://jsfiddle.net/ZZa8j/4/
add min-width:450px; to the <ul>.
check my Fiddle Demo
CSS
ul{
min-width:450px;
width: 100%;
}
.test{
height:20px;
width:20%;
border: 1px solid black;
border-radius: 3px;
display: inline-block;
float: left;
margin-left: 5px;
text-align: center;
}
HTML
<ul>
<li class="test"> Hello </li>
<li class="test"> Welcome </li>
<li class="test"> Test Process </li>
<li class="test"> Text Message </li>
</ul>
Result
Code Demo
Try :
overflow: hidden;
min-width:100px;
I have a sidebar that displays an icon and some text aligned. This sidebar is resizable and sometimes text and icon don't fit in the same line.
This jsfiddle shows an example. Blue button shows how it looks like when the line fits and orange button shows what happens when the text is too long.
My goal is to make it look like this when the line is too long:
It is text should stay at rigth side of the image vertically centered with it. No problem if I have to change HTML.
#Ivan; you can write like this http://jsfiddle.net/sandeep/UEk5b/15/
a, a:visited {
color: blue;
text-decoration: none;
display:table;
}
ul li a span {
display: inline-block;
width:102px;
vertical-align: middle;
}
display:table is not work in IE7 & below.
Edit
check this without display:table
http://jsfiddle.net/sandeep/UEk5b/19/
Try this way:
ul li {
cursor: pointer;
padding-left: 70px;
ul span {
vertical-align: middle;
display: inline-block;
}
ul img {
vertical-align: middle;
margin: 0 0 0 -70px;
}
http://jsbin.com/ogofun/5/edit#html,live
What you need is exactly described by html table elements:
<div id="resizable">
<ul>
<li>
<a href="#" class="ajax-page">
<table><tr><td valign="middle">
<img src="http://bit.ly/mRkUDB" alt="" width="60px" height="60px"/>
</td><td valign="middle">
<span>This is a test</span>
</td></tr></table>
</a>
</li>
<li>
<a href="#" class="ajax-page">
<table><tr><td valign="middle">
<img src="http://bit.ly/o7Elfp" alt="" width="60px" height="60px"/>
</td><td valign="middle">
<span>This is another larger test</span>
</td></tr></table>
</a>
</li>
</ul>
</div>
although you still might want different representation with different CSS styles or at low widths, in which case using tables might be a bad idea.
I am trying to fix a horrid nested table layout for a site. The page will have a variable number of elements that leverage Google charts. Instead of complex spaghetti code that tries to lay things out inside of table cells I want to use a horizontal UL so the content blocks will lay out cleanly regardless of the charts involved. The problem I am having is the Google charts components leverage tables. When a table element exists anywhere inside a LI the LI gets moved to the next line (assuming because table elements by default have a newline before and after).
I have tried the various display modes for the table with no luck. Is this a lost cause?
Example HTML code to illustrate the issue:
<html>
<body>
<style type='text/css'>
#navlist li{
display:inline;
list-style-type:none;
}
</style>
<ul id='navlist'>
<li>TEST</li>
<li>TEST2</li>
<li>
<table style='border:1px solid black'><tr><td>TEST</td></tr></table>
</li>
<li>TEST3</li>
<li>
<table style='border:1px solid blue'><tr><td>TEST</td></tr></table>
</li>
<li>
<table style='border:1px solid green'><tr><td>TEST</td></tr></table>
</li>
</ul>
</body>
</html>
Set display: inline-block; on your LI elements; that should do it nicely. It doesn't really work in Firefox 2, but nobody uses Firefox 2 anymore. You'll need to specify a doctype to get it to work in IE.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#navlist li {
display: inline-block;
zoom: 1;
*display: inline;
list-style-type: none;
vertical-align: middle;
}
</style>
</head>
<body>
<ul id='navlist'>
<li>TEST</li>
<li>TEST2</li>
<li>
<table style='border:1px solid black'><tr><td>TEST</td></tr></table>
</li>
<li>TEST3</li>
<li>
<table style='border:1px solid blue'><tr><td>TEST</td></tr></table>
</li>
<li>
<table style='border:1px solid green'><tr><td>TEST</td></tr></table>
</li>
</ul>
</body>
</html>
Well, this seems too easy to be true, but I tried it and it worked in FF. IE still displays half the tags on the second line, but it could be a simple fix. All I did was add float: left to the styles for the three tables.
<html>
<body>
<style type='text/css'>
#navlist li{
display:inline;
list-style-type:none;
float: left;
}
</style>
<ul id='navlist'>
<li>TEST1</li>
<li>TEST2</li>
<li>
<table style='border:1px solid black; float: left;'><tr><td>TEST</td></tr></table>
</li>
<li>TEST3</li>
<li>
<table style='border:1px solid blue; float: left;'><tr><td>TEST</td></tr></table>
</li>
<li>
<table style='border:1px solid green; float: left;'><tr><td>TEST</td></tr></table>
</li>
</ul>
</body>
</html>
Yes it's because tables are by default block elements (well, actually display:table but it acts in a similar manner). If your tables are very simple then adding display:inline to them may work.
Otherwise your best bet is to float each list element to the left:
#navlist li {
float: left;
list-style-type:none;
}
I'd suggest applying a set of drop-down menu type styles to your display, this does carry the disadvantage of complicating your mark-up slightly, but makes it easier to hide/display the tables at appropriate times. It also lets you have larger than one-row/one-cell tables.
If you need them to be visible at all times, though, then this approach isn't applicable. Regardless, I've posted a demo of my suggestion on jsbin.com