I need a CSS only solution to make pairs of <a> tags inline, but not all in a row. For example, in this JSFiddle http://jsfiddle.net/vLakfsLv/, I want two rows of two black squares.
<div>
<a></a>
<a></a>
<a></a>
<a></a>
</div>
a{
width:100px;
height:100px;
display:inline-block;
margin-right:20px;
background-color:black;
}
Obviously you can do this by wrapping the <a> tags with <div>s but I need a CSS hack. I cannot edit the HTML.
EDIT:
Please don't accomplish this with width because the width is constantly changing.
Why not display:block and float:left to the <a> and a clear:left to the correct nth-child ?
( you didn't say you needed IE* support )
Float everything to the left, make your third <a> tag (using a:nth-child(3)) clear the floats to the left. here's a fiddle
Try this:
a{
float: left;
}
a:nth-child(odd){
clear: both;
}
div {
overflow: hidden; /* Clear float */
}
Demo
you could give them margins, specifically left or rights, and/or give the surrounding div (of the four blocks) a set width. they will adjust to that.
Try this solution:
div {
width: 240px; /* 100 + 20 + 100 + 20 */
font-size: 0; /* To avoid additional space */
}
Demo
You don't need font-size: 0 if you get rid of spaces in between elements:
<div><!--
--><a></a><!--
--><a></a><!--
--><a></a><!--
--><a></a><!--
--></div>
you can use float like this:
a{
width:100px;
height:100px;
float: left;
margin-right:20px;
margin-bottom: 20px;
background-color:black;
}
a:nth-child(3n){
clear:both;
}
http://jsfiddle.net/vLakfsLv/8/
Related
Ok, first off I want you all to know that I have tried using the <span></span> tag (though maybe incorrectly).
Is there something I'm doing wrong with the <span></span> tag? Or is there something I need to do differently altogether?
Here is my current code to create a space without <br></br>:
#beforeImage span {
padding: 40px;
}
<span id="beforeImage">text</span>
2 things to fix:
you were applying the CSS to span of an ID selector, but you were using a span with an ID selector in your HTML.
span won't have padding because it is an inline element by default, so set inline-block or block
Snippet
#beforeImage {
padding: 40px;
display: inline-block; /* or block */
/* demo */
background: red
}
<span id="beforeImage">Foo bar</span>
<span> is by default an inline element and will not be sized nor accept vertical padding without resetting its display to inline-block ( or else but inline).
You might look for:
span{
display:inline-block;
padding: 40px;
}
beside, br could still be used
br {
line-height:3em;
vertical-align:top;/* debug FF/IE */
}
http://codepen.io/anon/pen/GoVdYY
But, do you really need an extra tag, could you not apply a bottom margin or padding to another element ?
Can simply target the Id of the span:
#beforeImage{
display:inline-block;
padding: 40px;
}
Or all spans:
span{
display:inline-block;
padding: 40px;
}
I want to make the horizontal boxes with the size of 200 x 200 pixel each. I decide to use the ul li. and you guys know well that I must apply the float:left attribute to the li tag to make it horizontal.
My problem is that when I apply the float:left to the li element, all content in li completely breaks its container. I noticed this because I append the border style to the main container and all the content is in the new line below the main container.
Here is my code
HTML :
<div class="content-box">
<h3 class="box-header">Recent Files</h3>
<ul class="horizontal-content">
<li>
<div class="filebox">
</div>
</li>
</ul>
</div>
and the css :
.content-box {
position:relative;
width:800px;
border:1px solid #dadada;
margin-left:10px;
padding:10px;
}
ul.horizontal-content {
list-style:none outside none;
}
ul.horizontal-content > li {
float:left;
display:block;
padding:10px;
}
.filebox {
position:relative;
padding:15px;
width:200px;
height:200px;
border:1px solid #dadada;
background-color:#ecf0f1;
}
Now you see all of my code, please help me figure out what I have done wrong.
You dont really need float:left to make it horizontal. Just add display:inline-block and remove float
ul.horizontal-content > li {
padding:10px;
background:grey;
display:inline-block
}
DEMO
Add:
ul.horizontal-content {
overflow: auto;
}
here use overflow:auto and here is link of demo Click Here
I have been trying many of the solutions but they won't solve. I will create the JSfiddle for you guys to see what went wrong
Okay, all problems are solved with clear:both
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 2 years ago.
I have two inline-block div elements, that are the same, positioned next to eachother. However there seems to be a mysterious space of 4 pixels between the two divs despite the margin being set to 0. There are no parent divs effecting them - What is going on?
CSS
#container
{
display:inline-block;
position:relative;
background:rgb(255,100,0);
margin:0px;
width:40%;
height:100px;
}
This is what i want it to look like:
In this instance, your div elements have been changed from block level elements to inline elements. A typical characteristic of inline elements is that they respect the whitespace in the markup. This explains why a gap of space is generated between the elements. (example)
There are a few solutions that can be used to solve this.
Method 1 - Remove the whitespace from the markup
Example 1 - Comment the whitespace out: (example)
<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>
Example 2 - Remove the line breaks: (example)
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
Example 3 - Close part of the tag on the next line (example)
<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>
Example 4 - Close the entire tag on the next line: (example)
<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>
Method 2 - Reset the font-size
Since the whitespace between the inline elements is determined by the font-size, you could simply reset the font-size to 0, and thus remove the space between the elements.
Just set font-size: 0 on the parent elements, and then declare a new font-size for the children elements. This works, as demonstrated here (example)
#parent {
font-size: 0;
}
#child {
font-size: 16px;
}
This method works pretty well, as it doesn't require a change in the markup; however, it doesn't work if the child element's font-size is declared using em units. I would therefore recommend removing the whitespace from the markup, or alternatively floating the elements and thus avoiding the space generated by inline elements.
Method 3 - Set the parent element to display: flex
In some cases, you can also set the display of the parent element to flex. (example)
This effectively removes the spaces between the elements in supported browsers. Don't forget to add appropriate vendor prefixes for additional support.
.parent {
display: flex;
}
.parent > div {
display: inline-block;
padding: 1em;
border: 2px solid #f00;
}
.parent {
display: flex;
}
.parent > div {
display: inline-block;
padding: 1em;
border: 2px solid #f00;
}
<div class="parent">
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
</div>
Sides notes:
It is incredibly unreliable to use negative margins to remove the space between inline elements. Please don't use negative margins if there are other, more optimal, solutions.
Using inline-block allows for white-space in your HTML, This usually equates to .25em (or 4px).
You can either comment out the white-space or, a more commons solution, is to set the parent's font-size to 0 and the reset it back to the required size on the inline-block elements.
Any easy fix although it's a bit outdated at this point in time is to just float the container. (eg. float: left;) On another note, each id should be unique, meaning you can't use the same id twice in the same HTML document. You should use a class instead, where you can use that same class for multiple elements.
.container {
position: relative;
background: rgb(255, 100, 0);
margin: 0;
width: 40%;
height: 100px;
float: left;
}
Found a solution not involving Flex, because Flex doesn't work in older Browsers.
Example:
.container {
display:block;
position:relative;
height:150px;
width:1024px;
margin:0 auto;
padding:0px;
border:0px;
background:#ececec;
margin-bottom:10px;
text-align:justify;
box-sizing:border-box;
white-space:nowrap;
font-size:0pt;
letter-spacing:-1em;
}
.cols {
display:inline-block;
position:relative;
width:32%;
height:100%;
margin:0 auto;
margin-right:2%;
border:0px;
background:lightgreen;
box-sizing:border-box;
padding:10px;
font-size:10pt;
letter-spacing:normal;
}
.cols:last-child {
margin-right:0;
}
simply add a border: 2px solid #e60000; to your 2nd div tag CSS.
Definitely it works
#Div2Id {
border: 2px solid #e60000; --> color is your preference
}
You need to add
#container
{
display:inline-block;
position:relative;
background:rgb(255,100,0);
margin:0px;
width:40%;
height:100px;
margin-right:-4px;
}
because whenever you write display:inline-block it takes an additional margin-right:4px. So, you need to remove it.
I would like to do responsive centered list of boxes.
So I used text-align:center, but the last line is centered too:
http://jsfiddle.net/NWmpL/1/
I was trying to use additional wrapper which closely surrounds <li>, but only way which I know to "closely surround" content is using display:inline
http://jsfiddle.net/NWmpL/2/
but here text-align:left dont working
And width:200px should be flexible (because in my case it is browser width)
Is there any other way to "closely surround" content? Or is there any other solution ?
Thanks in advance.
More clearly: http://jsfiddle.net/NWmpL/6/
I want change this
to this
You should be using display:inline-block for layout, not display:inline.
display:inline is only intended for text content; if you have any block content inside the element and you want inline behaviour, you should always use inline-block instead.
So I went to your fiddle and changed the inline to inline-block.
Guess what.... that fixed the problem; it now looks the way you wanted.
See http://jsfiddle.net/NWmpL/8/
You could also consider using float:left to achieve this kind of layout, but since we've got a working answer with inline-block, I'll leave it at that.
Add
float:left;
to
.center li { }
FIDDLE
ul.center {
display: table;
margin: 0 auto;
width:250px; }
ul.center li {
display: block;
float: left;
width:75px; height:75px;
margin: 2px;
list-style: none;
background-color: #CCC; }
check the updated fiddle:
http://jsfiddle.net/4t6ha/2/
Try this different approach:
CSS:
.holder
{
width:300px;
border:1px dotted #000;
float:left;
padding:5px 5px;
}
ul
{
list-style:none;
}
li
{
display:inline-block;
height:30px;
width:30px;
background:#dedede;
margin:2px;
float:left;
padding:10px;
margin-bottom:5px;
}
For some reason this text isn't being centered.
#highlightheader
{
background-color:#006600;
color:white;
font-size:30px;
text-align:center;
font-weight:bold;
}
<span id="highlightheader">example text</span>
http://tinkerbin.com/eoJprUq5 (jfiddle going too slow, used this one instead)
EDIT: i ONLY want the text to be highlighted, not have a whole green bar across.
span is an inline tag
add display:block to css
http://tinkerbin.com/oBgV5mcU
a span is an inline element, whereas a block element like <div> would work... alternatively add display: block; to your css.
You should use a div around the span, especially since you want a heading here. As mentioned in the other answers, span should be used for inline elements. You're using it right for highlighting but positioning should be done through div.
Try that:
div.center{
text-align:center;
}
#highlightheader
{
background-color:#006600;
color:white;
font-size:30px;
font-weight:bold;
}
<div class=center>
<span id="highlightheader">example text</span>
</div>
Add a display: block; to the #highlightheader. <span> is an inline element!
Hi there try to use this with your css
padding:0px 50px 0px 50px;
Because you use SPAN and span is an inline element. Use display:block in CSS or better p-tag <p> or div with width:100% to center your text.
Edit:
#highlightheader {
text-align:center;
}
#highlightheader span {
background-color:#006600;
color:white;
font-size:30px;
text-align:center;
font-weight:bold;
}
<p id="highlightheader"><span>example text</span></p>
Span is an inline element. This means its width will auto fit to the size of its contents. Instead, change the span to a p tag - a block element. Block elements have a default with of 100% of the parent.
You can see a demo here