I am trying to get the following result, but cannot get the css correct - I keep getting either a span on a new line, or all of the span's inline.
I've tried messing with display, clear, float, etc. and just can't seem to get this to line up?
I can use table to do this, and it works fine...but think there must be a css way to acheive the same?
<div>
<span class="button">
<button type="button">
CLICK!</button>
</span>
<span class="field">
<span>
Field 1
</span>
<span>
Field 2
</span>
</span>
</div>
.button
{
margin: 1em 10px 0px 0px;
width: 250px;
text-align: right;
display: inline-block;
}
.field
{
margin: 0.5em 0px 0px;
color: #002c5a;
}
Your new css: Change display:inline-block to float:left; in both classes (button & field) and add display:block; to .field span {}.
.button
{
margin: 1em 10px 0px 0px;
width: 250px;
text-align: right;
float:left;
}
.field
{
float:left;
margin: 0.5em 0px 0px;
color: #002c5a;
}
.field span { display:block;}
DEMO
Demo 2 is with more css that looks like you sample!
DEMO 2
Try:
.button,.field{display:table-cell;vertical-align:middle;padding:5px;border:1px solid #ccc;width:50%;}
.button{text-align:right;}
.field{text-align:left;color: #002c5a;}
div{display:table;margin:0 auto;width:100%;}
.field span{display:block;}
DEMO here.
Related
I have to generate custom buttons in a row. The problem is when I place the button class inside of a "span" tag, the button shape turns from round to oval. If I place it inside of a "div" tag, it displays fine, but not in a row.
Here is my CSS:
.dashboard-button-green{
height: 27px;
width: 27px;
background-color: #72a017;
border-radius: 50%;
text-align:center;
text-decoration:none;
font-size: 8pt;
font-weight:bold;
margin: 5px 10px 5px 5px;
top:10px;
padding-top: 12px;
padding-left: 10px;
padding-right: 2px;
color:white;
}
Here is my HTML:
<div ng-app="myModule" ng-controller="ContractorCtrl">
<span class="dashboard-button-green">70%</span> <span><img src="~/Images/ContractorWidget/red_cross.png" /></span>
</div>
This is how it renders:
The image on the left should look like the image on the right. I tried changing the line-height, but it didn't help.
Any assistance is greatly appreciated!
It's because the span tag is inline. You need to add display: inline-block to your span to behave more like a button.
You can add this to your css:
span{
display:block;
}
I'm working on a personal project, but I'm having some difficulty with a div, which has some styling that I can't seem to get around. It's a thin strip at the top of my user interface, where users have a few controls over what's shown on the screen. Pretty important to keep around (so deleting it isn't an option). In case it helps at all, I am using Eric Meyer's CSS Reset as a normalizer.
My problem is that the div element seems to have some intrinsic margin or padding that I can't seem to work around in my css. I've included a photo here for reference; the div is in green.
I need to make that green div element thinner. It would help the layout a lot if I could move it closer to the top of the page. If you have any ideas or see something that I've missed, I would appreciate the help.
I'm also including the html code for that content as follows:
<div class="new_entry_control_container">
<p>You have <span class="credits">33 Credits</span> remaining.
<span class="button">Add More Credits</span>
<span class="button">Add More Items to Study List</span>
<span class="pagination">< 1 | 2 | 3 ></span>
</p>
</div>
As well as the CSS that applies here:
div.new_entry_control_container {
background-color: green;
max-width: 900px;
margin-left: auto;
margin-right: auto;}
div.new_entry_control_container p {
text-align: center;}
.credits {
color: #ffd400;}
.button {
background-color: #ffd400;
color: #3a0091;
border: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 1px 8px 4px 8px;
margin: 10px 0px 0px 3px;}
.pagination {
margin-left: 25px;
font-size: 17px;}
Not sure if it's caused by the padding of parent element of that green bar. A workaround would be using negative "margin-top". And to make it thinner (assuming there would only be one line in that bar), use "height" combined with "line-height".
So the css might look like this
div.new_entry_control_container {
background-color: green;
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-top: -10px;
height: 18px; line-height: 18px;
}
Hope that helps.
Try:
div.new_entry_control_container{
padding:0;
/* more CSS here */
}
.credits{
padding:0; margin:0;
/* other CSS here */
}
I've tried to align the button submit and the search input but I doesn't work and I don't get to understand why.
I have this styling code:
input[type=search]
border: none
cursor: text
padding: 0
border: 1px solid #cfcfcf
.search-main input, .search-main button
height: 30px
display: inline-block
.search-main button
background: #55e0a8
border: none
width: 18%
margin-left: -7px
display:inline-block
.search-main input
width: 80%
and this html:
<form method="get" class="search-main">
<input name="q" type="search">
<button type="submit"></button>
</form>
and here's what I get:
Here's the online version
So, pretty silly question, but since I've been trying for more than 40+ minutes, thought I would try to post it here. I've been playing with firebug, padding, margins, and I don't get where the problem comes from.
You can try -
.search-main > button {
float: right;
}
Add vertical-align: middle to your inline-block elements:
.search-main input, .search-main button {
height: 29px;
display: inline-block;
vertical-align: middle;
}
Problems arise when you use height on inline elements.
You can simply remove the height and replace with padding on both elements :
.search-main input, .search-main button {
padding: 10px 0;
display: inline-block;
}
.search-main button {
background: #55e0a8
border: none
width: 18%
margin-left: -7px
display:inline-block
padding: 11px 0; // +1px for border on the input
}
It was easy, I hope the following code suffices what you needed.
.search-main button {
background: #55e0a8;
border: none;
width: 18%;
margin-left: -7px;
display: inline-block; //additional code
float: left; //additional code
vertical-align: middle; //additional code
height: 32px; //additional code
}
and this for the input:
<input name="q" type="search" style=" display: inline-block;float: left;">
How can I align text so that some of it aligns to the left and some of it aligns to the right within the same line?
<p>This text should be left-aligned. This text should be right aligned.</p>
I can align all of the text to the left (or to the right), either directly inline, or by using a stylesheet -
<p style='text-align: left'>This text should be left-aligned.
This text should be right aligned.</p>
How can I align the corresponding text to the left and to the right, while keeping it on the same line?
<p style="text-align:left;">
This text is left aligned
<span style="float:right;">
This text is right aligned
</span>
</p>
https://jsfiddle.net/gionaf/5z3ec48r/
HTML:
<span class="right">Right aligned</span><span class="left">Left aligned</span>
css:
.right{
float:right;
}
.left{
float:left;
}
Demo:
http://jsfiddle.net/W3Pxv/1
If you don't want to use floating elements and want to make sure that both blocks do not overlap, try:
<p style="text-align: left; width:49%; display: inline-block;">LEFT</p>
<p style="text-align: right; width:50%; display: inline-block;">RIGHT</p>
An answer using css flex layout and justify-content
p {
display: flex;
justify-content: space-between;
}
<p>
<span>This text is left aligned</span>
<span>This text is right aligned</span>
</p>
HTML FILE:
<div class='left'> Left Aligned </div>
<div class='right'> Right Aligned </div>
CSS FILE:
.left
{
float: left;
}
.right
{
float: right;
}
and you are done ....
While several of the solutions here will work, none handle overlap well and end up moving one item to below the other. If you are trying to layout data that will be dynamically bound you won't know until runtime that it looks bad.
What I like to do is simply create a single row table and apply the right float on the second cell. No need to apply a left-align on the first, that happens by default. This handles overlap perfectly by word-wrapping.
HTML
<table style="width: 100%;">
<tr><td>Left aligned stuff</td>
<td class="alignRight">Right aligned stuff</td></tr>
</table>
CSS
.alignRight {
float: right;
}
https://jsfiddle.net/esoyke/7wddxks5/
<h1> left <span> right </span></h1>
css:
h1{text-align:left; width:400px; text-decoration:underline;}
span{float:right; text-decoration:underline;}
Add span on each or group of words you want to align left or right.
then add id or class on the span such as:
<h3>
<span id = "makeLeft"> Left Text</span>
<span id = "makeRight"> Right Text</span>
</h3>
CSS-
#makeLeft{
float: left;
}
#makeRight{
float: right;
}
One example, only to show the richness of the solution from Benjamin Udink ten Cate in the answer above: "An answer using css flex layout and justify-content"
With this CSS:
p {
display: flex;
justify-content: space-between;
}
#connettore{
overflow: hidden;
margin: 0px 20px 10px 180px;
width: 250px;
align:left;
}
ol#connettore {
counter-reset: pin 6; /* Initiate a counter */
list-style: none; /* Remove default numbering */
/*list-style: decimal; /* Keep using default numbering for IE6/7 */
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
ol ol {
margin: 0 0 0 2em; /* Add some left margin for inner lists 20px*/
}
/*=========== Rectangle-shaped numbers ===========*/
.rectangle-list a{
position: relative;
display: block;
padding: .1em .2em .1em .8em;
margin: .5em 0 .5em 2.5em;
background: #ddd;
color: #444;
text-decoration: none;
transition: all .3s ease-out;
line-height: .1px;
}
.rectangle-list a:hover{
background: #eee;
}
.rectangle-list a:before{
content: counter(pin);
counter-increment: pin -1;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #fa8072;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.rectangle-list a:after{
position: absolute;
content: '';
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
.rectangle-list a:hover:after{
left: -.5em;
border-left-color: #fa8072;
}
<ol id="connettore" class="rectangle-list" >
<li><p><span>BLU</span> <span>(SWDIO)</span></p> </li>
<li><p><span> MARRONE</span> <span>(SWDCLK)</span></p> </li>
<li><p><span>GIALLO</span> <span>(RESET)</span></p> </li>
<li><p><span>NERO</span> <span>(GND)</span></p> </li>
<li><p><span>BIANCO</span> <span>(VCC)</span></p> </li>
</ol>
This is the way I do pinout. :-)
If you're using Bootstrap try this:
<div class="row">
<div class="col" style="text-align:left">left align</div>
<div class="col" style="text-align:right">right align</div>
</div>
If you just want to change alignment of text just make a classes
.left {
text-align: left;
}
and span that class through the text
<span class='left'>aligned left</span>
There is a button. Inside the button text. How to move the text when you click on an 1 px down, not moving with the button itself, only the text inside?
<span class="button-wrapper">
<a href="#" class="button">
button text
</a>
</span>
1.button-wrapper - Serves as the gradient border
2.element have 1px margin + background-gradient
If I have orders from the top padding, clicking, button increases in size, but I just need to move text within a tag and, without moving a button, how?
It might be worth using the right markup to properly achieve your desired effect.
<button class="button">
<span href="#" class="innerButton">
button text
</span>
</button>
Then you can use this CSS to move the span 1px down on click.
.button span
{
position: relative;
}
/*while pressing*/
.button span:active
{
top: 1px;
}
http://jsfiddle.net/UuyFe/
Or, alternatively, for the text in a single input button element
<input id="submit" type="submit" value="Submit" />
this CSS may be useful:
#submit
{
padding-top: 4px;
}
#submit:active
{
padding-top: 6px;
}
I had a similar problem and fixed it as follows, though I don't particularly understand why the float is necessary. Any comments on that would be greatly appreciated.
I'm using padding to make the text move, by adding 1px top + left and subtracting 1px right + bottom. But for some reason that I don't understand, this alone pushes the sibling boxes down 1px. We don't want the buttons themselves to move, though.
HTML:
<p>
<span class="button">third</span>
<span class="button">fourth</span>
</p>
<p>
<input type="button" class="button button2" value="fifth" />
<input type="button" class="button button2" value="sixth" />
</p>
CSS:
.button {
outline: none;
background-color: blanchedalmond;
border: 1px solid maroon;
padding: 3px 10px 4px 10px;
box-sizing: border-box;
display: inline-block;
position: relative;
line-height: 20px;
margin: 0;
}
span.button {
display: inline-block;
text-indent: -9999px;
width: 20px;
height: 20px;
}
p {
background-color: magenta;
overflow: auto;
}
.button2 {
float: left;
margin-right: 4px;
}
.button:active {
background-color: red;
border: 1px solid brown;
padding: 4px 9px 3px 11px;
margin-top: 0px;
}
Fiddle where "fifth" and "sixth" behave like we want them to because we added float.