In a chain of list elements (<li>) with display: inline, is there a way to force a line break using a CSS property?
Using a <br> within a <li> feels dirty, and outside a <li> is probably forbidden.
to clarify:
I need them "display: inline" because I may need to center them within the UL
I need only some of the elements to have a line break.
Why do you use display:inline?
display: list-item; does exactly what you need (which is default for li)
You can have all <li> elements rendered with float:left and then set on one of them clear:left. This will cause it to "jump" to the next line.
Alternatively, float:right and clear:right will do a similar thing.
Do you want a "line break" after each <li> or just after a few certain ones?
For the former: If you set the width wide enough to fill the container, they will line wrap (actually, they only have to be wide enough to fill 51% of their container, since two could no longer fit on one line). -- but in this case, you probably don't need them to be inline at all.
For the latter: You would probably be better off using float: left with a clear: left on each one you want to start a new line with.
Try putting display:block; on the particular <li> that you want on the next line.
You could try and use the :after pseudo-element but I haven't played with it much.
li.class:after { content: "\a"; white-space: pre; }
works for me.
Related
I made a calendar in html and css.
I have individual td for each 30 mins time span.
But i want to create 30 divs inside that td for each minute.
Right now its showing like this :
http://jsfiddle.net/mausami/FHfjL/1/
but i want to display each div in one line.
to show each div i have written ' in each div.
the divs are like this :
<div style="display:inline-block; clear:both; width:0.1%;" class="08:00">'</div>
Can anybody please help me ?
First, a few important improvements to your code.
Class names cannot start with a number.. Quick fix is to append some string to the beginning of them - I used "min_".
You have the same id multiple times. An id should only be used once.
Move all of your styles external - sop doing inline, it's hard to update.
You're not floating anything so you don't need clear:both;
Here's the same thing you have, but pretty code: http://jsfiddle.net/daCrosby/FHfjL/7/
Now, your question. "[how do I] display each div in one line?" I'm not quite sure if you want each div to be in one line (30 lines total), or each div to be in the same line (only 1 line total). So here's both ways:
To display each div on it's own line:
.tbDay div{
display:block;
}
http://jsfiddle.net/daCrosby/FHfjL/8/
To display all 30 in one line:
.tbDay div{
display:inline-block;
width:3.333333%; /* 100% divided by 30 divs */
margin-left:-4px;
}
Note the margin-left:-4px;. This is a fix for the spacing between inline-block elements as discussed here.
http://jsfiddle.net/daCrosby/FHfjL/9/
If you want to use those div to show time passing by,
you could use a gradient and % in background or even better <meter></meter> .
http://www.w3.org/wiki/HTML/Elements/meter
You can easily from js or server side script fill the right value to update your calendar.
cheers
You're displaying the minute div as display:inline-block
Change this to block or remove it completely. Also consider using a list instead of divs.
EDIT
The answer above assumed "each div in a new line" meant one minute div = one new line
As per clarification in the comments below, to make all divs within the td appear in one line, apply a white-space:nowrap
e.g. insert the following into the css portion of your fiddle:
#tblDay td{
white-space:nowrap;
}
Why are you doing clear:both if you want to display them inline-block? Just remove that style rule and it should work as you expect.
When you set display:inline-block, the element effectively behaves like a single character of text, that you can otherwise treat as a block.
Among other things, this means that it will wrap onto a new line if there isn't enough room.
To get around this, add white-space:nowrap to the container element. Optionally, add white-space:normal to the inline-block divs.
I would also suggest defining CSS rules as:
.tdDay {white-space:nowrap}
.tbDay>div {
display:inline-block;
white-space:normal;
}
Is there a way to display a row of links horizontally without using float:left? It's way too hard to center a div when using float:left, I can never get it to work.
Use display:inline;
http://jsfiddle.net/tcQzL/3/
If your elements are inline elements they will display in one row, otherwise you must make them inline.
I'm not sure if I understood correctly, but just make new div-where your buttons are in. And in that new div make your links have float:left
Then just normally position that new divyou made.
But I think that those those earlier answers from Andrei S and mesiesta are more better.
you could try display: inline or inline depending on your needs (from what I know, inline-block offers more flexibility than just inline)
here, check this fiddle
There's a catch though if you use these, if you look in the fiddle, my first two elements are written one after another so that I don't have any gaps between them (that's why I added the borders) and the other ones are written one below each other and as you can see, there's the gap I was talking about. So keep that in mind while writing your code.
There are different workarounds about this, but if you do need borders, and not just the text, you should really consider using float to avoid any workarounds
You can use display:inline-block for that. Write like that
.link{
display:inline-block;
*display:inline;/* For IE7 */
*zoom:1;/* For IE7 */
vertical-align:top;
}
Check this http://jsfiddle.net/tcQzL/10/
My biggest gripe with HTML is that line breaks add a tiny bit of space between elements. (jsFiddle.)
This can screw up layouts where child elements are sized to exactly fit their parents.
I read somewhere that you can remove this implicit padding - while still keeping the code somewhat legible - by using comments like this:
<!--
--><div>Foo</div><!--
--><div>Bar</div><!--
--><div>And so on...</div><!--
-->
This works, but I feel like there has to be a better solution. What other ways are there to work around the line-break padding?
That isn't "a little bit of space", but literally a space character. You are using display: inline-block to align your elements horizonally, and that's how "inline" works.
If you want to use inline-block you need to remove the white space between the elements as you are doing it.
Otherwise you can use one of the other methods to horizontally align, for example floating or display: table-cell.
A solution would be to use some HTML compressor before publishing your pages to remove unneeded space from your markup, like in this example.
From what I've seen though, they tend to leave always one space at least, because they don't know if you really wanted that space or not, and since browsers considers only the first space if there are more than one, compressors leave one space there.
You should try font-size:0px; line-height:0px for outer div.
Something like this:
<div class="outer">
<div class="inner">123</div>
<div class="inner">34556</div>
</div>
<style>
.outer {
font-size:0px;
line-height:0px;
}
.inner {
font-size:14px;
line-height:16px;
display:inline-block;
}
</style>
This is because you use display: inline-block; for the div elements.
Block elements strip white space around them, inline elements don't.
Try float: left; instead.
Stupid question maybe, but I cannot seem to get the text to wrap around my images. In the editor it looks fine, everything is wrapped around it, but when I save it, there is no wrapping.
example: http://www.beatinganger.com/three-reasons-for-angry-children
remove the float: left; from #left_container p
there's no need to float all the paragraphs you already have the image floating inside the content so it's the only one that needs to float for the p or any other element to wrap around it
It sounds like you may need to add styles to the images, either float left or float right - can't say for sure as the link is broken.
Edit: It is because you have width:100% and float:left set on #left_container p, and the images you are adding are wrapped in p tags. Remove width:100% and float:left and you should be back in business.
as clairesuzy says aswell...
Put a float on the <img> tag. But I suggest to avoid writing css in the tag though, it's not good practice unless you really have to. Do it externally. You can target the image by doing, p img{ float: left; } (basic code), depending on the class or id you've giving the tags.
I've got menu items that look like this
<ul>
<li>Item1<span class="context-trigger"></span></li>
<li>Item2<span class="context-trigger"></span></li>
<li>Item3<span class="context-trigger"></span></li>
</ul>
with CSS that turns the above into a horizontal menu, and JS that turns the [spans] into buttons that bring up contextual menus. Vaguely like this:
Item1^ Item2^ Item3^
If the menu gets too wide for the browser width, it wraps, which is what I want. The problem is that sometimes it's putting in line-breaks before the [spans]. I only want it to break between [li]s. Any ideas?
try using
white-space: nowrap;
in the css definition of your context-trigger class.
Edit: I think patmortech is correct though, putting nowrap on the span does not work, because there is no "white space" content. It might also be that sticking the style on the LI element does not work either, because the browser might breakup the parts because the span is a nested element in li. You might reconsider your code, drop the SPAN element and use css on the LI elements.
You need to put the following to keep your list item from wrapping (putting it in the context-trigger class would just keep the span contents from wrapping):
li { white-space:nowrap; }
If you float the <li> elements, you should get the effect you want.