Please, take a look to this piece of code:
<span class="something">
<label>test1</label><br/>
<label>test2</label><br/>
<label>test3</label>
</span>
This will create a vertical list of labels. Is possible to do this without the <br> tags using CSS? It is, is possible to show the same vertical aligned label list with this HTML code?:
<span class="something">
<label>test1</label>
<label>test2</label>
<label>test3</label>
</span>
You could do this:
span.something label {
display: block; /* as opposed to display: inline; */
}
This works because by default <label>s are inline elements. If you change them to display block they will display in a list with line breaks between them.
However this is probably a bad way to do what you want. What you really want is an unordered list:
<ul class="something">
<li>test1</li>
<li>etc...</li>
</ul>
To get rid of the bullet points:
ul.something {
list-style: none;
}
Or, without changing the contents of the span to block elements:
span.something label:after {content: '\A'; white-space: pre-line}
See http://jsfiddle.net/VsnKx/
Edit: Another way (if you don't mind floats) is
span.something label {float:left; clear:both}
which doesn't use :after, although it does use floats, which may be undesirable. You also will have to clear the first element after the span.
You can set display:block for the labels, which will adjust them to be displayed on a new line.
Example:
http://jsfiddle.net/niklasvh/eZ8t5/
It is possible. Use this css code:
span.something label{
display:block;
clear:both;
}
Yes, there are several ways, those mentioned in other answers as well as setting label { display: table-row}. However, there is no apparent reason not to use br tags or div containers or a table in HTML, if you want the labels on separate lines, and no apparent reason for wanting that (what is a label without an associated input field?).
Related
I'm not even sure if this is possible, but I figured it was worth asking.
It would be pointless me trying to explain, I'm rubbish at things like that, so check out this demo - http://www.deanelliott.me/braintrain/
See how the titles on the 6 images have an orange background colour? And now see how the padding is missing from the right hand side of the first, and left hand side of the second line?
Is it possible to add padding there so that the background doesn't just stop at the end/beginning of the word?
Or should I tell them it's unfeasable and they'll have to live with it?
The issue here is you can't pad at word end/start where the content wraps, so this won't be possible unless you change the display type for the links to a block-style type, e.g. "block" or "inline-block", but naturally that affects the appearance somewhat.
You can get slightly further by adding:
white-space: pre-wrap;
to the .blog-grid .grid-block h2 a, #sidebar h2 a rule; however it's not a complete solution (but it's all I can come up with).
.blog-grid .grid-block h2 a, #sidebar h2 a {
/* other css properties */
display: inline-block; /* or display: block */
}
Adding text-indent in CSS can also work
text-indent: 10px;
add some code to class "post-title tilt" - it answeirs for your titles.
write maybe padding-left:20px; or if it won't work: margin-left:20px;
can you edit the code? adding span for each line should work
span class="line1" and span class="line2"
<a href="#">
<span class="line1">a safe alternative to</span>
<span class="line2">ritalin</span>
</a>
I'm pulling my hair out here trying to get CSS to position only a handful of html elements.
Here is the code:
http://jsfiddle.net/7pTL8/
What I want is for "person#business.com [v]" to be at the top-right and then below it "Average Depth," "[x] Settings", and "Past 24 hours [v]" are all displayed together at the same level. I've tried floats and that had strange results. I don't want to resort to using a table here because everything I read about CSS suggests using tables for layout is a poor solution.
Its not as tuff as you think..
here is small solution.. its not very good but it can solve you problem for now..
[a link] http://jsfiddle.net/7pTL8/2/
<div id="user-selection">person#business.com [v]</div>
<div id="settings-container">
<h1 id="graph-title">Average Depth</h1>
<span id="settings-button">[x] Settings</span>
<span id="timeframe-dropdown">Past 24 hours [v]</span>
</div>
CSS
#graph-title {
position:absolute;
left:1px;
text-align: left;
}
#settings-container {
text-align: right;
}
#user-selection {
text-align: right;
}
Your problem is probably the use of h1 element. By default h1 has the style display: block. If you add the style display: inline it will be fine.
EDIT:
I think you ought to use span for it if you don't have any special reasons.
<span> elements use display:inline, while <h1> elements use block by default. Manually override the #graph-title to use display:inline and it will line up with the rest of your elements:
#graph-title
{
display:inline;
}
I have a code like
<span ><img src="xxx.png">Tab1</span><span ><img src="yyy.png">Tab2</span>
This code creates two tab but the only problem is that tab1/tab2 and image xxx/yyy are in same line.I want them to be in different line and i want both span element in same line.
The tabs should look like this
Float:left property of css would be beneficial in doing your work
You may be using the wrong element. <span> is use for inline content, whereas <div> may be better suited to what you're trying to do. You want them on a new line, but span is specifically created/used for non-line breaking items.
Try this:
<div><img src="xxx.png">Tab1</div><div><img src="yyy.png">Tab2</div>
More info on What is the difference between HTML tags <div> and <span>?
I take the markup for granted:
img { display: block; }
span { float: left; }
.item-list {
letter-spacing: -0.3em;
}
.item-list a {
letter-spacing: 0;
display: inline-block;
}
<div class="item-list">
a
a
a
a
</div>
only in win ie6,the gap between a is still exit ,the style letter-spacing:-0.3em will make effective when delete the style of a { letter-spacing:0 }
why? can i figure out this problem?
wow this one stumped me for a while...believe it or not here is your answer:
font-size:0; must be added to parent element
In the case of your example, I would define the font-size of the a tags separately, and add "font-size:0;" to the parent div element
In other words:
css:
.item-list{letter-spacing:-0.3em; font-size:0;}
.item-list a{letter-spacing:0;display:inline-block; font-size:SOMETHING HIGHER;}
(also your DOCTYPE declaration must be correct or display inline-block can have problems working in IE, at least I had trouble with it with IE7)
This should end any extra margin frustration you're experiencing from display:inline-block;
It has to do with how you're typing your HTML. Because you're formatting it nicely in your IDE, a la, with spaces and new lines, those spaces and newlines show up when displayed on the page. So instead of
<div class="item-list">
a
a
a
a
</div>
type it out as one line and they will go away:
<div class="item-list">aaaa</div>
You can add this CSS
a{float:left}
Gap will Remove
I always use:
line-height: 2.2; //or whatever value you want
I took from facebook layout and works amazing for me
Is there a way to prevent a line break after a div with css?
For example I have
<div class="label">My Label:</div>
<div class="text">My text</div>
and want it to display like:
My Label: My text
display:inline;
OR
float:left;
OR
display:inline-block; -- Might not work on all browsers.
What is the purpose of using a div here? I'd suggest a span, as it is an inline-level element, whereas a div is a block-level element.
Do note that each option above will work differently.
display:inline; will turn the div into the equivalent of a span. It will be unaffected by margin-top, margin-bottom, padding-top, padding-bottom, height, etc.
float:left; keeps the div as a block-level element. It will still take up space as if it were a block, however the width will be fitted to the content (assuming width:auto;). It can require a clear:left; for certain effects.
display:inline-block; is the "best of both worlds" option. The div is treated as a block element. It responds to all of the margin, padding, and height rules as expected for a block element. However, it is treated as an inline element for the purpose of placement within other elements.
Read this for more information.
.label, .text {display: inline}
Although if you use that, you might as well change the div's to span's.
A DIV is by default a BLOCK display element, meaning it sits on its own line. If you add the CSS property display:inline it will behave the way you want. But perhaps you should be considering a SPAN instead?
<span class="label">My Label:</span>
<span class="text">My text</span>
try this (in CSS) for preventing line breaks in div texts:
white-space: nowrap;
The div elements are block elements, so by default they take upp the full available width.
One way is to turn them into inline elements:
.label, .text { display: inline; }
This will have the same effect as using span elements instead of div elements.
Another way is to float the elements:
.label, .text { float: left; }
This will change how the width of the elements is decided, so that thwy will only be as wide as their content. It will also make the elements float beside each other, similar to how images flow beside each other.
You can also consider changing the elements. The div element is intended for document divisions, I usually use a label and a span element for a construct like this:
<label>My Label:</label>
<span>My text</span>
div's are used to give structure to a website or to contain a lot of text or elements, but you seem to use them as label, you should use span, it will put both text next to eachother automatically and you won't need to wright css code for it.
And even if other people tell you to float the elements it's best that you just change the tags.
I don't think I've seen this version:
<div class="label">My Label:<span class="text">My text</span></div>
<div id="hassaan">
<div class="label">My Label:</div>
<div class="text">My text</div>
</div>
CSS:
#hassaan{ margin:auto; width:960px;}
#hassaan:nth-child(n){ clear:both;}
.label, .text{ width:480px; float:left;}
Try applying the clear:none css attribute to the label.
.label {
clear:none;
}
use this code for normal div
display: inline;
use this code if u use it in table
display: inline-table;
better than table
try float your div's in css
.label {
float:left;
width:200px;
}
.text {
float:left;
}
I have many times succeeded to get div's without line breaks after them, by playing around with the float css attribute and the width css attribute.
Of course after working out the solution you have to test it in all browsers, and in each browser you have to re-size the windows to make sure that it works in all circumstances.
display: inline-block worked for me