I have been trying to force a <p> element to not wrap by itself so the formatting works better (the p element is meant to be a "hashtag") As you can see if you run the code you get the answered text way below the Dummy Text - it's meant to be inline.
This is my code:
.answered {
display: inline-block;
width: 90px;
background-color: green;
text-align: center;
}
h3 {
display: inline-block
}
<h3>Dummy Text...</h3><p class="answered">Answered</p>
Update
The answered text is now centre aligned and the h2 tag is inline-block
The question has been answered in the comments...
In stylesheet:
h3, .answered{
display: inline-block;
}
Try <span>instead of the p element. The p element is for defining paragraphs, which start on a new line. If you aren’t writing a new paragraph, <span> is a better choice as it does not use a new line.
Related
So, I've looked around SO, and I've found the inverse of this question mostly everywhere. That makes me feel this is either a rarer occurrence, or something trivial that I just can't figure out.
https://jsfiddle.net/je5dpqrL/
The above jsFiddle shows that I have an <h2> element within which I've put an anchor tag with the pull-right class of Bootstrap. Since I want the anchor to display in a smaller font, I'm using font-weight and font-size. Now, since it's floating, the text is centered.
Is there any way to align the text so that the baseline of the Title and the <a> element is the same?
You can adjust the vertical position of the <a> with line-height (and use for example em to make it relative size):
.cl {
font-weight: normal;
font-size: 40%;
display: inline-block;
line-height:4em
}
This is what you need https://jsfiddle.net/p05bu4c2. Create a span inside the link
.cl {
font-weight: normal;
font-size: 40%;
display: inline-block;
}
.cl span {
line-height: 1;
vertical-align: bottom;
}
h2 {
border:1px solid #ff0000;
}
<h2>Title <a class='pull-right cl'><span>Stuff</span></a></h2>
So, The following code seems to work:
<h2>Text<a class="pull-right"><span class="text-right" style="display:inline-block">Test</span></a></h2>
Turns out that adding an .inside-block to an element inside the .pull-right class seems to fix it. No need to play around with line-heights
JSFiddle: https://jsfiddle.net/je5dpqrL/10/
EDIT: Thanks to Diamond for this suggestion of adding an element inside the <a> tag, although the CSS is completely different from the one suggested by him.
I have the following code
HTML:
<div>
<h3> Lorem ...</h3>
<a>some link</a>
</div>
CSS:
a {
float: left;
}
h3 {
display: inline-block;
}
If there is enough horizontal space both elements sit nicely next to each other, but if not enough space, the anchor is pushed down (not what I want) I would like to see the h3 element's text wrap instead. Furthermore, the text inside the elements can be anything, meaning that their width is variable. Any suggestions ?
JSFIDDLE
either
h3{
white-space: nowrap;
overflow: hidden;
text-overflow: hidden;
}
or give them widths
h3{
width:50%;
}
a{
width:50%;
}
or whichever values u want so that they won't get out of their boundries
I don't exactly understand how you want the output to be, i've given two outputs below.
1) <h3> and <a> tag side by side without width:
You can use display:table property which requires no width
DEMO
CSS:
div
{
display:table;
}
a {
display:table-cell;
}
h3 {
display: table-cell;
}
2) <a> tag continuing with the text in the <h3> tag:
You can use display:inline
DEMO
CSS:
a {
display:inline;
}
h3{
display:inline;
}
float doesn’t work this way on elements higher up in the DOM tree. (The only reason that the link did not get pushed down under the text content of the h3 to begin with was that you did display the latter as inline-block.)
If you can place your link before the h3, then it’s easy (you just have to remove inline-block form the h3 as well) – http://jsfiddle.net/ygnbgL7k/9/
EDIT:
[ from comment]: but the only problem with that solution is that the wrapped text starts at the beginning of the next line (under the floated anchor).
If you don’t want that, add
h3 { overflow:hidden; }
http://jsfiddle.net/ygnbgL7k/15/
h3{
white-space: nowrap;
overflow: hidden;
}
Here is the simple html
<p> some text here </p>
more
and the css I tried
p+a{
color: #f00;
display: inline-block;
/* also tried float: left; */
}
To bring up the output as this
some text here more
I want more in the line of p.
p is a block level element. So you couldn't inline to a. Therefore you need to style your p as display: inline; or display: inline-block; and then give display: inline; or display: inline-block; to a
here is the fiddle.
You need to give the paragraph display: inline-block; as well, because it is a block-level element. Therefor it automatically takes the available space and pushes the anchor to a new line. Also you'll need to add the closing " to your href-attribute.
(If you're able to manipulate the markup of the paragraph – just add the anchor inside of it.)
HMTL:
<p>some text here</p>
more
CSS:
p {
display: inline-block;
}
p + a {
color: #f00;
display: inline-block;
}
Note: Please use classes to style things like that instead of elements. Add a class to your anchor and select it with p + .read-more or something like that.
just add the below css to your stylesheet.
p{ dislpay:inline-block;}
P is a block level element make it inline-block so next inline element come up next to p tag.
use this code
CSS:
p > a {
color: #f00;
display: inline-block;
font-size: 18px;
}
HTML:
<p>some text here more</p>
I want the btn next to the string. I can't figure it out even using CSS inline
<span class="subscribe_button"> <h3>Books</h3> <%= render 'follow_form' %></span>
CSS:
.subscribe_button {
display: inline;
}
You have some invalid HTML here.
A block level element cannot be within an inline one, this is basic HTML knowledge.
What I suggest you do is wrap both elements in a div and use float: left;
<div class="wrap">
<h3>Books</h3>
<span class="subscribe_button"> unsubscribe</span>
</div>
CSS:
.wrap
{
width: 300px;
}
.wrap h3,
.wrap span
{
float: left;
}
.wrap span
{
margin-left: 10px/*your value*/;
}
I also suggest you go read up on HTML rules, what is allowed where and why they are or are not allowed.
http://jsfiddle.net/Kyle_Sevenoaks/zJUZs/
The Books part is (also) a block (due to <h1>), so you need to set it to inline as well (as shown in the comment of limelights), otherwise your button will still be pushed to the next line.
Try adding this to your CSS
.subscribe_button h3 {
float: left;
}
If you float an element it means other elements after it will wrap onto the same line as it (as long as theyre width does not make them too wide).
Span is inline element and h3 is block element. Inline elements should be inside block elements. Have you tried to validate your html code? http://validator.w3.org/
try:
display: inline-block;
Try following code
.subscribe_button h3{
display: inline;
}
use float:left for both h3 and button
I think you can do this with this code:
.subscribe_button > * {
display: inline;
}
'>' is a child selector and * matches to all element.
Yo can read more about CSS2 selectors: CSS2 Selectors
I am not that good with html and css so i am using a template, but whatever i do know i try to use it.
Here is an image of the problem http://i53.tinypic.com/dmw6yt.jpg
As you can see the user test is actually on a new line. That is not how it's supposed to be. It is supposed to be on the same line as this text "Accounts stats for user X".
The html and css i use are
<div class="user">Account stats for user<div class="info">test</div></div>
div.user
{
font-size: 13px;
text-align: center;
}
div.info
{
font-size: 18px;
}
use inline element <span> instead of block element <div>
Inline elements are for elements like text that you want to display on the same line and then fall down below previous inline elements when there is not enough space left. Block elements are intended to be used for the structure of a site.
This is because a DIV automatically assigns a new line because it is a 'block-level' element. In a situation like this I'd swap out all of the <div> for <span> as these are an inline-element.
You could also use the CSS attribute display:inline on the <div> to override this behaviour.
You put the word "test" in new div. This means that this word will be on new row. Try using span with class or id instead of div. If you really want to use div for the word "test" you could assign float property or inline display
<div class="user">Account stats for user<span class="info">test</span></div>
.info
{
margin-left: 10px;
font-size: 18px;
}
If you automatically want it to be on the same line, i would suggest using <span> instead.
<span class="user">Account stats for user</span><span class="info">test</span>
And if you absolutely need to use divs then:
<div class="user">Account stats for user</div><div class="info">test</div>
With the CSS:
div.user
{
font-size: 13px;
text-align: center;
}
div.info
{
font-size: 18px;
float:left;
}
Either use a <span class="info"> instead of a <div>, or use these CSS:
div.info
{
font-size: 18px;
display: inline-block;
}
Normally you should prefer using a span, but there are several cases (e.g. if you want to specify a width for the element) that require a div. In your case as it stands, go with a span.
Try this:
div.user
{
font-size: 13px;
text-align: center;
display: inline;
}
div.info
{
font-size: 18px;
}
I think this will do the trick.
you could add 'display:inline;' to them and it should work.
Or you could float them both to the left, also would probably work.
'float:left;'
put this inside div.info
display: inline;
So your div.info class should look like this
div.info
{
font-size: 18px;
display: inline;
}