I know it sounds simple, but this is really annoying me. I have researched online and not found a perfect answer for me yet.
I have this html code:
<h5 class="start-online"><div id="online_ajax">0</div> Clients online </h5>
I want the online_ajax div to display inline before the Client online text.
My current css is:
h5.start-online {
text-align: center;
font-size: 11px;
}
.online_ajax {
position: relative;
display: inline-block;
}
You cannot nest <div> inside <h5>. Period. Make it <span> instead.
<h5 class="start-online"><span id="online_ajax">0</span> Clients online </h5>
You don't even need to style it! The <span> tag is the inline version of <div> tag (as how <div> tag is the inline version of <span>).
Also, in your CSS, you are supposed to select the id and # is the ID selector.
#online_ajax {
position: relative;
display: inline-block;
}
But yeah, as I said you before, please don't use <div>.
As mentioned before: You should use <span> instead of <div>. Then you don't need display: inline-block; anymore in your css.
You made a mistake.
online_ajax is an id, use # instead of dot(.)
Related
This question already has an answer here:
List of HTML5 elements that can be nested inside P element?
(1 answer)
Closed 1 year ago.
I have the following code on my page:
.fraction {
vertical-align: middle;
display: inline-block;
}
.frtop, .frbottom {
text-align: center;
}
.frbottom {
border-top: 1px solid;
}
<p style="text-indent: 2em;">
The fraction
<div class="fraction">
<div class="frtop">1</div>
<div class="frbottom">20000</div>
</div>
equals to 0.00005.
</p>
where I am trying to display an inline fraction in an indented paragraph.
However, the fraction is displayed on a separate line: There is a line break between the text The fraction and the fraction itself. How can I fix this?
Note 1: This problem does not occur if I use div instead of p to define my whole paragraph; however, in this case I have to add text-indent: 0; in the CSS code of the .fraction definition and the content does not seem semantically correct to me: I do want to use p to define all my paragraphs.
Note 2: Obviously, I have to replace div with span. However, I need some extra things in the CSS code I provided, so that it works.
Try this :
.fraction {
display: inline-flex;
flex-direction: column;
align-items: center;
text-indent: 0;
vertical-align: middle;
}
.frbottom {
border-top: 1px solid;
}
<p style="text-indent: 2em;">
The fraction
<span class="fraction">
<span>1</span>
<span class="frbottom">20000</span>
</span>
equals to 0.00005.
</p>
Considering the fraction is a part of the paragraph, it shouldn't be in a div anyway.
Edit:
The flex element allows you to display the content either as a row or a column. It's pretty useful for changing classic display.
Since .fraction is in flex, you need align-items to put the content in the middle.
For more information on flex, I would suggest this article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/. This is a very good explanation; much better than everything I could write here :) .
I use text-align: justify for multiple i tag. It works well with multiple I tag in multiple lines, but when to combine in one line, it doesn't work.
You can try my jsfiddle at https://jsfiddle.net/lhphuc210291/zvajLgfc/8/
html code
<div class="m_grid">
<i>abc</i>
<i>def</i>
<div class="m_justify_fix"></div>
</div>
<br/>
<div class="m_grid">
<i>abc</i><i>def</i>
<div class="m_justify_fix"></div>
</div>
css code
.m_grid {
text-align: justify;
line-height: 0
}
.m_grid .m_justify_fix {
display: inline-block;
vertical-align: top;
width: 100%;
height: 0;
overflow: hidden
}
First div tag works ok but with second div it doesn't work. I would like to know what is the differences from these two case. Because I render HTML by using angular component templateUrl. It's auto render HTML code without break line between i tag and css not work.
Simple answer : there’s nothing to justify if there’s no whitespace between.
I have code like this
<p><span>On this day,<div class="underline-text">Sunday</div>,we, the undersigned:</span></p>
and my css
.underline-text {
display: inline-block;
border-bottom: 2px solid black;
width: auto;
}
But my problem is when i run this code, is show like this :
On this day,
`Sunday,we, the undersigned:`
What i need is like this :
`On this day,Sunday,we, the undersigned:`
How i do that way????
NOTE : I'm using bootstrap 3.
UPDATE : Works, i was stupid so i'm changing <div> to <span>. Thanks you all for the answer.
Why i got -2 vote??? Wat's wrong with my question??? I just asking simple question, and i kno i'm so stupid cause i'm using inline-block on span. But why i got minus for this???
Make this adjustment:
On this day, <span class="underline-text">Sunday</span>,we, the undersigned:
A div inside a p element is invalid HTML. The paragraph element closes before the div element begins.
Here's how the browser renders your code:
For a complete explanation of this behavior see: https://stackoverflow.com/a/41538733/3597276
<p> or <span> tags can't contain block-level elements inside them. Most browsers will split it into 2 separate paragraphs. Check this answer: https://stackoverflow.com/a/5441670/6424295
Maybe try using a<div> instead of a paragraph and get rid of the <span> tags, as I don't think they're really doing anything.
Yes. It should be like this:
.underline-text {
display:inline-block;
border-bottom: 2px solid black;
width: auto;
}
<div>
<p>
On this day,<span class="underline-text">Sunday</span>,we, the undersigned:
</p>
</div>
I'm not the best at HTML. Essentially I am trying to get the effect of a lot of line breaks, without filling my code with a lot of consecutive <br> tags. What I have in my head is this CSS:
.movedown {
position: relative;
down: 120px;
}
and this HTML, where my text is:
<span class="movedown">*text here*</span>
I only need it on a single page. Anyone know where I'm going wrong?
Assuming you want to inject lots of breaks between two words you can inject a span tag styled as follows:
.long-br {
display: block;
height: 12em; /* 12em is roughly 10 lines at current font size/1.2 line height */
}
<p>Hello <span class="long-br"></span> World</p>
Alternate: if you want to insert lots of breaks between two blocks of text, the ideal way is to use margins:
.long-gap {
margin-top: 12em;
}
<p>Paragraph 1</p>
<p class="long-gap">Paragraph 2</p>
Try this:
.movedown {
position: relative; //Not required
margin-top: 120px;
}
You need to use the CSS property margin-top to add some space without using line breaks.
.movedown {
margin-top: 120px;
}
down is not an existing css rule. What you should be using is a div with margin-top, this creates a space above the element.
.down {
margin-top: 50px;
}
*top text*
<div class="down">*text here*</div>
Instead of 'down' try:
top:120px;
Just use <div> elements instead of <span>.
By default div is a block style element and span is inline.
block occupies the whole row, so each new one will be on a new row.
You can change the default behaviour with CSS but better to get a grip of the basic elements first.
I can't figure out how to do this with CSS. If I just use a <br> tag, it works flawlessly, but I'm trying to avoid doing that for obvious reasons.
Basically, I just want the .feature_desc span to start on a new line, but:
If I make it an inline element, it won't have a line-break.
If I make it a block element, it will expand to fit the entire line, putting each of these icons on its own line, and wasting tons of space on the screen (each .feature_wrapper will be a slightly different size, but none will ever be as wide as the entire screen.)
Example code: This works, but uses a br tag:
<li class='feature_wrapper' id='feature_icon_getstart'>
<span style='display: none;' class='search_keywords'>started</span>
<span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span><br/>
<span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span>
</li>
I want to style this with CSS to achieve the same result:
<li class='feature_wrapper' id='feature_icon_getstart'>
<span style='display: none;' class='search_keywords'>started</span>
<span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span>
<span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span>
</li>
Any ideas? Or am I going about this the wrong way?
You can give it a property display block; so it will behave like a div and have its own line
CSS:
.feature_desc {
display: block;
....
}
Even though the question is quite fuzzy and the HTML snippet is quite limited, I suppose
.feature_desc {
display: block;
}
.feature_desc:before {
content: "";
display: block;
}
might give you want you want to achieve without the <br/> element. Though it would help to see your CSS applied to these elements.
NOTE. The example above doesn't work in IE7 though.
I think floats may work best for you here, if you dont want the element to occupy the whole line, float it left should work.
.feature_wrapper span {
float: left;
clear: left;
display:inline
}
EDIT: now browsers have better support you can make use of the do inline-block.
.feature_wrapper span {
display:inline-block;
*display:inline; *zoom:1;
}
Depending on the text-align this will appear as through its inline while also acting like a block element.
For the block element not occupy the whole line, set it's width to something small and the white-space:nowrap
label
{
width:10px;
display:block;
white-space:nowrap;
}
Using a flex parent works too.
Setting flex-direction to column will put each child on a new line and setting align-items will make them not take up the whole width.
Here is a small example:
<div class="parent">
<a>some links</a>
<a>that should be on their own lines</a>
<a>but not take up the whole parent width</a>
</div>
.parent {
display: flex;
flex-direction: column;
align-items: flex-start;
}
span::before { content: "\A"; white-space: pre; }
I was running into a similar situation on our WooCommerce site. The "Add to cart" button was right next to a custom product field, and I needed to drop the product field below the button. This is the CSS that ended up doing the trick for me
#product-57310 label[for="wcj_product_input_fields_local_1"] { display: -webkit-box!important; margin-top: 80px; }
where "#product-57310" is the ID of the product in woocommerce, so that it only applies to the specific product page and not every product page, and where "label[for="wcj_product_input_fields_local_1"]" is targeting the first label specifically to get under the "Add to cart" button.
I had a similar issue where I had something like this:
<span>
<input>
<label>
<input>
<label>
...
</span>
I didn't wanna mess with the source html generator (even tho this html is pretty bad). So the way I fixed it is use a display: grid on the top span. Then grid-template-columns: auto auto;
Anyone looking to do something similar, grid is a good solution now (in 2021).
For example, for this particular problem, applying
display: grid; grid-template-columns: auto auto; to li and grid-column: 1 / 3; to last span will do it.
Use two CSS rules
word-break: break-all;
display: list-item;
inside of a CSS selector and body
Note:
If only dealing with text that needs to be put on separate lines.
Try using word-break like so (note stack overflow code automatically does this but I included it to help clarify usage in other environments:
word-break: break-all;
If only dealing with in-line HTML elements like a <span>
Then see this answer as to how to convert non text elements (like an anchor tag) to line separated elements using a display: list-item also on the html tag
Link
How to make text in <a> tag wordwrap
Example (For HTML inline elements like span)
span {
display: list-item;
word-break: break-word;
}
<span>Line 1</span>
<span>Line 2</span>
<span>Line 3</span>
<span>Line 4</span>
<span>Line 5</span>
Example (For Text Content)
function makePerson(name, age) {
// add code here
let person = Object.create({});
person.name = name;
person.age = age;
return person;
}
const person = makePerson('Vicky', 24);
const outputDiv = document.querySelectorAll("body .output");
const keys = Object.keys(person);
outputDiv.forEach((div,key) => {
div.innerHTML = person[keys[key]];
});
body #output{
word-break: break-all;
}
<div>
<div class="output"></div>
<div class="output"></div>
</div>