Consider a simple webpage like this one:
<!DOCTYPE html>
<html><head><title>Test!</title></head>
<body>
<p>a b c</p>
</body></html>
I'd like to have the a b c formatted as if I wrote a\hfill b\hfill c in TeX. This is: a on the left, then b centered, then c on right; all on the same line. How can I do this?
How you would go about this greatly depends on how you want the spacing to be when there's actually content here. These techniques will work with any tags, I chose a list here for simplicity. If you're using p and span, then replace ul with p and li with span.
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
All 3 of these techniques work without modifying the source order. Floats could do the job, but you would have to place c before b for it to work properly.
This technique uses flexbox and assumes that the elements containing a, b, and c are just large enough to contain them and the space between them is equal (if a is larger than b, then b will not be centered). Flexbox has a lot of options to determine behavior regarding wrapping, but the default is to not wrap at all.
http://jsfiddle.net/4g8NY/1/ (prefixes not included)
ul {
display: flex;
justify-content: space-between;
}
Flexbox does not have very widespread support at the moment, due to the fact that IE10 is the first IE version to support it. http://caniuse.com/#search=flexbox
You could use the display: table family along with text-alignment to give the illusion that the elements are distributed in the desired way, but their containers take up 33% of their parent's width. In this example, b should remain perfectly centered regardless of the actual content. Your elements are also equal height and will be forced to appear on the same line no matter what.
Unlike the other techniques, this assumes there will only ever be 3 elements. You'll need to modify the column widths and tinker with which columns should have which alignment each time you add an element.
http://jsfiddle.net/4g8NY/2/
ul {
display: table;
width: 100%;
}
li {
display: table-cell;
width: 33%;
}
li:nth-child(2) {
text-align: center;
}
li:last-child {
text-align: right;
}
Support for this technique is very good, since all of our properties are available in IE8 (IE8 is my official cutoff, IE7 and older are not considered "supported browsers").
The third technique involves using a pseudo element as the last line of the parent element so that we can justify a, b, and c. There is no way to prevent wrapping with this technique if the elements do not fit on the same line.
Unlike the other techniques, additional markup is not necessary. It could just be a p tag like you already have in your example code.
http://jsfiddle.net/4g8NY/3/
ul {
text-align: justify;
}
ul:after {
content: " ";
display: inline-block;
width: 100%;
}
li {
display: inline; /* if you're using an element that's already `inline` like a span, you don't need this */
}
Similar to the above technique, it works in IE8 or better.
Related
I have a horizontal menu built using a <ul> element. I'm trying to get it to evenly spread out each <li> across the width of the menu. Based on several answers here on SO, I used the following CSS:
ul {
display: table;
width: 100%;
}
ul li {
display: table-cell;
}
However, no matter what I try, the <li> elements still end up with a calculated display of block, with this contradictory information from the debugger (tested in FF and Chrome):
I didn't know what is going on here, and (more importantly) how do I get my list items to display as table-cell?
In photo is showed that your style.css is really big (min.1835 lines) and because of that styles to ul could be overvritten somewhere.
To make your rule more important than existing rule, use !important keyword after rule like so:
ul {
display: table!important;
width: 100%!important;
}
ul li {
display: table-cell!important;
}
CSS has a trait called importance, it chooses which rules are the most specific and thus should override more loose rules. As you seem to use a CSS framework, your own rules don't override the framework's generic rules. Turns out that you have two options to increase the importance of your rules at main.css:
Add !important after your rules:
ul li {
display: table cell !important;
}
Make your selectors more specific:
#menu ul li.menu-list-item { ... }
Your question also looks very strange and you may be subject to a browser rendering bug, have you tried it out with other browsers?
Is there a way to print target page numbers with hyperlinks which linked to various places within the same document?
<h1>Table of Contents</h1>
<ul>
<li>Introduction</li>
</ul>
...
<section id="introduction"> <!-- Appears, for example, on page 3 when printed -->
<h1>Introduction</h1>
...
</section>
So that the output is like:
Table of Contents (page 0)
Introduction.........................3
...
Introduction (page 3)
I only need this to work with the Google Chrome browser when printing to PDF (on OS X).
Is there some CSS or JavaScript trickery which would allow me to achieve this?
It looks like this is part of a new working draft of the CSS specification:
http://www.w3.org/TR/2014/WD-css-gcpm-3-20140513/#cross-references
I doubt that there is any browser support yet...
I have no idea if this will work in a PDF or not, but to answer the question of how this can be done in CSS:
You can generate the numbers using counter-increment on a pseudo element in css:
note that I changed your <ul> to an <ol> as this is an ordered list, whether you use the list-style or not.
ol {
counter-reset: list-counter;
}
li:after {
counter-increment: list-counter;
content: counter(list-counter);
float: right;
}
Making the little dotted line in between the text and the number takes a little more work, but you can achieve that by adding in some extra span elements and using css display: table; and display: table-cell; to lay them out properly:
<ol>
<li><span>Test</span><span class="line"></span></li>
<li><span>Test2</span><span class="line"></span></li>
<li><span>Test3</span><span class="line"></span></li>
</ol>
li {
display: table;
}
li span, li:after {
display: table-cell;
vertical-align: bottom;
}
li span.line {
border-bottom: 1px dotted #000;
width: 100%;
}
Setting the width to 100% on the span.line element, while not setting any width at all forces it to fill all of the remaining space (this is due to table-cell display elements not being allowed to break to new lines, and preventing overflow of content)
See full demo
It's not the cleanest approach to have to add the extra span elements, but it is a bit of a tricky task. Perhaps someone else will be able to take the time to think of a more efficient way to accomplish it? You could always just put an underline under the entire <li>, and skip the extra markup, at the cost of being a little less cool.
What I want to do is break up the inline-block <li>s. The code is generated and I have no access to it before it is written to the page. Because the <li> elements have no white space between them, they are not split and won't justify across the page.
I don't mind if the solution is CSS or Javascript based.
I have tried various things in CSS 'content:' and 'after:'.
Please see this fiddle for a demo of the problem: http://jsfiddle.net/2L56N/5/
Edit: The result should like the top example. However, the generated code is like in the bottom example (no space between the tags, causing the inline-block to become one). Drag the width over so only 2 images show to see the justify effect I am looking for.
Unless I'm misunderstanding the question, you can simply add margins to the li elements like so:
ul li {
display: inline-block;
margin:5px;
}
http://jsfiddle.net/B7cL9/
You can use display:flex; with justify-content:space-between; to simulate your text-align:justify when white space are missing in between your inline boxes this will only work for younger browsers
:
ul {
display:flex;
justify-content:space-between;
text-align: justify;/* your code */
}
ul li {
display: inline-block;/* your code */
}
DEMO
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
How to you get rid of the white space between list items? I am trying to make it so that the images are right next to each other. Even though I have set the styling to margins: 0;, they are still separated.
CSS
ul.frames{
margin: 20px;
width: 410px;
height: 320px;
background-color: grey;
float: left;
list-style-type: none;
}
ul.frames li {
display:inline;
margin: 0;
display: inline;
list-style: none;
}
ul.frames li img {
margin: 0 0 0 0;
}
HTML
<li>
<img id="myImg" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
<img id="myImg2" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
<img id="myImg3" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
<img id="myImg4" src="img.jpg" width="102.5px" height="80px"/>
</li>
Updated Sept. 1st, 2014
In modern browsers, flex-box is the preferred method of doing this. It's as simple as:
ul {
display: flex;
}
See a JSFiddle here.
For legacy browser support refer to the other options below, which are still just fine, albeit slightly more complex.
Though each of the other answers gives at least one good solution, none seem to provide all of the possibilities. And that's what I'll try to do here.
Firstly, to answer your implicit question of why there's spacing, it's there because you've set your LIs to display as inline elements.
inline is the default display value for text and images in all of the browsers that I know of. Inline elements are rendered with spacing between them whenever there's whitespace in your code. This is a good thing when it comes to text: these words that I've typed are spaced apart because of the space I've included in the code. And there's also space between each line. It's this very behavior of inline elements is what makes text on the web readable at all.
But sometimes we want non-text elements to be inline to take advantage of other properties of this display style. And this typically includes a desire for our elements to fit snugly together, quite unlike text. And that seems to be your problem here.
Without further ado, here are all the ways I know of to get rid of the spacing:
Keeping them inline
(Not recommended) Apply negative margin to the LIs to move them over.
li { margin: -4px; }
Note that you'll need to 'guess' the size of a space. This isn't recommended because, as Arthur excellently points out in the comments below, users can change the Zoom of their browser, which would more than likely mess up the rendering of your code. Further, this code requires too much guesswork and calculation. There are better solutions that work under all conditions.
Get rid of the whitespace
<li>One</li><li>Two</li>
Use comments to make the whitespace a comment JSFiddle
<li>One</li><!--
--><li>Two</li>
Skip the closing tag (HTML4 valid / HTML5 Valid) JSFiddle
<li>One
<li>Two
Put the whitespace in the tag itself (Note: Early Internet Explorers will not like this)
<li>One</li
><li>Two</li
>
Take advantage of the fact that the spacing between the elements is calculated as a percentage of the font size of the parent. Consequently, setting the parent's font size to 0 results in no space. Just remember to set a non-zero font-size on the li so that the text itself has a nonzero font size. View on JSFiddle.
Floating them
Float them instead. You'll probably want to clearfix the parent if you do this.
li { float: left; display: block; }
Incredible but no one here has provided the proper solution for this problem.
Just do this:
ul.frames {
font-size: 0;
}
ul.frames li {
font-size: 14px; font-size:1.4rem;
display: inline;
}
Keep in mind that we won't always have access to modify the markup. And trying to remove the spaces from the <li>s with JavaScript would be totally unnecessary when the solution is simply two font-size properties.
Also, floating the <li>s introduces another potential problem: You wouldn't be able center and right align the list items.
If you try to do float:right; on the <li>s then their order will be swapped, meaning: the first item in the list would be last, the second item is the one before the last, and so on.
Check out this other post here in SO: A Space between Inline-Block List Items
You should just remove all the spaces in the ul tags just like this: http://jsfiddle.net/dFRYL/3/
Since the <li> elements are inline, in you write spaces in or between them you will have spaces displayed.
The reason you get the spaces is because you have spaces between the elements (line break)
<ul>
<li>One</li><li>
Two</li><li>
Three</li>
</ul>
You can use negative margins like this:
margin-right: -4px;
margin-bottom: -4px;
Take a look here.
It also works up and down, I added another one to show that here.
Using display:inline; causes whitespace in your HTML to create whitespace when displaying the HTML.
There are two solutions to this:
1) Change how you make them appear inline, I would recommend using floats on all of the list items, then using a clearfix of sorts.
2) Remove all whitespace between your list items, e.g.
<li><img id="myImg" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg2" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg3" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg4" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li>
Personally I would recommend option 1 (I hate display: inline)
here is my attempt at it. Hope it helps. As Sean Dunwoody mentioned, white space in your html can be a cause of the space, but I've floated the li and made the image to display:block;. Left comment on where I made changes. Hope it helps: http://jsfiddle.net/FJ3nV/
Here my small but main changes:
/*
* Added float left
*/
ul.frames li {
margin: 0;
list-style: none;
float:left;
}
/*
* Moved inline sizing here just to clear up obtrusive html.
* Added display block.
*/
ul.frames li img{width:102px; height:80px; display:block;}
I would change your li elements to inline-block.
One person did not recommend
li { margin: -4px; }
But making a slight change to it will cause it to work even when the font size changes or when the browser zooms in
li{ margin-right: -0.25em; }
That should fix that white space problem completely. However, if you are using a poorly designed font-face that doesn't follow correct letter-height standards then it may cause a problem. However those are harder to find and most of the fonts google hosts don't have that issue.
I have already found following question with almost similar content: How to indent list items using CSS when you have floating blocks?
And here is my situation: if a list item gets too long, so that it automatically makes a line break, the text flow continues without the indentation.
Here is what I am expecting:
I can handle this using outside position property, modifying the margin or padding of an li element, if the text height is smaller than the image height. But if the text continues, especially on the bottom border of the image - it looks totally destroyed.
A good code to play with can be found here: http://csscreator.com/node/30984 on the second post.
Any help will be deeply appreciated
The most obvious, and simple solution, is to clear the list so that it's forced down under the floated elements, instead of sharing the same space as floated image, for instance, in this jsfiddle.
img {
float: left;
}
ol {
clear: both;
}
Of course, there will be other problems depending on the situation you're using this in, but otherwise it should solve your problem.
There are two ways to do this, either of which work with the code sample you linked to.
ul, ol {
display: table;
list-style-position: inside;
padding-left: 22px;
}
or
ul, ol {
overflow: hidden;
list-style-position: inside;
padding-left: 22px;
}
There are subtle differences, such as overflow: hidden not allowing you to have something like tooltips pop up without being cut off, but no biggie here.
Not sure if this was all even available in 2010, but it is where I live (the future).