How to keep words on a single line [closed] - html

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
How can I keep this two words on a single line:
<div align=right>hai</div>
<div align=center>hello</div>
I have already tried it but I didn't get any satisfactory preview.

Divs are block elements by default so they will appear on separate lines.
You can set them to inline by css: display:inline
Or use an inline element like or
<span align=right>hai</span>
<span align=center>hello</span>

I'm not sure I correcctly understand your question, but I'll try an answer anyway.
Let's say you have 2 words in a sentance :
<p>word1 word2</p>
and you want this 2 words to be, at any resolution, displayed beside each other.
Replace the space between this 2 words by (code for non-breaking space in HTML), and it will be displayed as a single entity :
<p>word1 word2</p>

If you wanted only DIV tag
Simply, use display:inline-block with DIV tag.
div {
display: inline-block;
}
<div align=right>hai</div>
<div align=center>hello</div>
Update
You can even use style attribute like below:
<div style="display:inline-block">hai</div>
<div style="display:inline-block">hello</div>
But, it's not a good practice...

Related

Search and replace div content with another div content [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am trying to find a way to replace a DIV that has a few other divs inside with another div that also has a few other divs inside. Tried to do it with a few different programs: Atom, Sublime, Visual Studio Code, PhpStorm but it didn't work.
It could probably be done using regex since the first div starts with <div class="short-form"> and ends with
...id="submitbtn_intakeFormShortAutofillSubmit"/>
</form>
</div>
</div>
but my problem is probably the number of tabs, spaces and newlines.
Just to mention, I don't have to make this active on a webpage, but inside hundreds of html pages on my hard drive, so if you can recommend some free software that can do it, it's also good.
Yep, this is very possible! Here's how you do it:
<div class="short-form"[\s\S]*id="submitbtn_intakeFormShortAutofillSubmit"\/>\s*<\/form>\s*<\/div>\s*<\/div>
Break it down!
<div class="short-form" match anything that starts with <div class="short-form"
[\s\S]* matech 0 or more of anything that is white space or is not whitespase (So bassically match anything)
id="submitbtn_intakeFormShortAutofillSubmit"\/> match anything that matches id="submitbtn_intakeFormShortAutofillSubmit"/>
\s* match 0 or more whitespace
repeate the last two a few times!
Here's an example on regexr!
You can use the regex
<div class="short-form">[\s\S]*?id="submitbtn_intakeFormShortAutofillSubmit"\/>\s*<\/form>\s*<\/div>\s*<\/div>
see it live

How to make a number of breaks in CSS? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I want the content to be shown like this but without <br> tag by using somehow in CSS. Something like this:
Hi <br><br><br><br><br><br><br><br><br><br> Hello <br><br><br><br><br><br><br><br><br><br> Bye
You can use <pre> tag if you need to target plain text.
<pre>
one
two
three
</pre>
Or, the CSS way white-space: pre; for other elements like <div>.
div {
white-space: pre;
}
<div>
one
two
three
</div>
You can use any of these css properties, but you must put the text into HTML tags, such as <p>, div, etc:
height
margin-top
margin-bottom
padding-top
padding-bottom
#midP{margin-top:50px;margin-bottom:20px;border:1px solid red;}
<p>Hi</p>
<p id="midP">Hello</p>
<p>Bye</p>

how to make span element in middle of text in div [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
i have a code like bellow:
<div style="font-size:58px;"> Name <span style="font-size:18px; vertical-align:middle;">|</span> 2015-04-01 </div>
and then i have the result like this
but i want the span element a little bit higher like this
so please teach me how to do, Thank you very much.
Actually the span element technically is already in the middle. You can verify this by applying vertical-align:top;, vertical-align:bottom; or vertical-align:middle; on the span element.
Other than that, I’d recommend using
position:relative;
top:-.5em;
on the span. Use the em units to make it dependent on font size (although that doesn’t perfectly work because it’s dependent on the font size of the span element).
Demo:
<div style="font-size:58px;"> Name <span style="font-size:18px; vertical-align:middle;position:relative;top:-.5em;">|</span> 2015-04-01 </div>
Of course you can adjust the value as you please.

Why do I get an overflow from <span>s inside a <div>? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
My HTML is really simple, but for some reason, I am getting a strange overflow. I can't seem to understand where it is coming from and how to get rid of it.
This is my HTML:
<div class="labels">
<span ng-repeat="label in labels">{{label}}</span>
</div>
This is my CSS:
.labels {
width: 300px;
background: #AAFFEE;
}
The angular code I have is quite long (a long list of labels) but here is the gist of it:
angular.module('guy',[]).controller('Guy', function($scope) {
$scope.labels = [
'adding and subtracting',
'audio',
…
];
Here is a full Plunker.
Why do the <span> elements not wrap inside the <div>, but instead overflow?
There is no space between your words (which is why you had to add padding-right), so they’re all treated as one word. This is a side-effect of Angular removing spaces, which itself is a side-effect of Angular just not being very good.
Put a space in.
<div class="labels">
<span ng-repeat="label in labels">{{label}} </span>
</div>
Voilà

display <p> sentence without unnormal space [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
http://goo.gl/MNdDs
I have a question about the <p> sentence.
I used text-align:justify in my <p> tag, because I want my sentence cut fine in the right/left side.
But after using text-align:justify , there are too many space appeared in my sentence.
do you know how to fix it ? thank you
text-align: justify will make sure that a letter lines up with the left side and the right side. It does this by putting extra spacing between words. Perhaps you'd like text-align: left? You could also play with the sizing/margin/padding on those tags.