HTML: Get text made up from different elements be shown in one line (link and text)

Question

So, In my webpage, the user can change the language. This is easy to enable however, the problem is with texts that are made up of multiple elements.

Imagine something like: "... for further information please click HERE." With "here" of being a link.

At first, I just did it with <p <a>/> however, this resulted in the text not being in one line anymore but in separate lines.

This is the code in question:

                    <div align="center" >                       
                        <font color="#534f4f" size="+2">    
                            <div id="txt_whatwedo_learnmore">
                                To learn more about what exactly we can do for you and further 
                                info about timelines and pricing, click 
                            </div>                      
                            <a id="txt_whatwedo_learnmore2" style="text-decoration:none" color="black" 
                            href="./pdf/Pricing_App_Dev_2019_Ger.pdf">here.</a> 
                            <div id="txt_whatwedo_learnmore3">
                                (prices may vary).
                            </div>                          
                        </font>
                    </div>

I can access every element via script over the IDs but they all are in different lines, looking like this:

How do I get this to be in one line with every element still having its unique ID?

font tag is obsolete and should not be used, align attribute on a div is invalid (use css instead). But to make your elements all appear in a line, make them inline or inline block — Pete, Apr 12 '19 at 14:15

Chris Barr · Accepted Answer · 2019-04-12T14:23:51.233

use <span> tags instead of <div> tags. Spans are display: inline and divs are display: block;

<div align="center">                       
    <font color="#534f4f" size="+2">    
        <span id="txt_whatwedo_learnmore">
            To learn more about what exactly we can do for you and further 
            info about timelines and pricing, click 
        </span>                      
        <a id="txt_whatwedo_learnmore2" style="text-decoration:none" color="black" 
        href="./pdf/Pricing_App_Dev_2019_Ger.pdf">here.</a> 
        <span id="txt_whatwedo_learnmore3">
            (prices may vary).
        </span>                          
    </font>
</div>

Also, please please please do not use <font> align="center" and color="black", these are all very ancient HTML from the early 90's that should not be used any more! This code can be more easily manipulated by using CSS, and you should avoid using inline style="..." as well.

here's a better want to write the same code:

#learn-more {
  color: #534f4f;
  font-size: 24px;
  text-align: center;
}

#learn-more a {
  text-decoration: none;
  color: black;
}

<div id="learn-more">
  <span id="txt_whatwedo_learnmore">
    To learn more about what exactly we can do for you and further 
    info about timelines and pricing, click 
  </span>
  <a id="txt_whatwedo_learnmore2" href="./pdf/Pricing_App_Dev_2019_Ger.pdf">here.</a>
  <span id="txt_whatwedo_learnmore3">
    (prices may vary).
  </span>
</div>

You're very welcome! please mark this as the correct answer if it helped you. — Chris Barr, Apr 12 '19 at 14:25
yes. def. it just tells me that 10 minutes must have passed ;) — innomotion media, Apr 12 '19 at 14:29
+ thank you for your suggestions. i just got started doing html. i will bear this in mind :) — innomotion media, Apr 12 '19 at 14:30

Mamun · Answer 2 · 2019-04-12T14:27:03.690

div element is block level elements and block elements appear on the screen as if they have a line break before and after them. You can use display: inline.

#txt_whatwedo_learnmore,
#txt_whatwedo_learnmore3{
  display: inline;
}

<div align="center" >                       
  <font color="#534f4f" size="+2">    
      <div id="txt_whatwedo_learnmore">
          To learn more about what exactly we further 
          info about timelines and pricing, click 
      </div>                      
      <a id="txt_whatwedo_learnmore2" style="text-decoration:none" color="black" 
      href="./pdf/Pricing_App_Dev_2019_Ger.pdf">here.</a> 
      <div id="txt_whatwedo_learnmore3">
          (prices may vary).
      </div>                          
  </font>
</div>

CodeF0x · Answer 3 · 2019-04-14T00:34:36.833

You shouldn't use the font tag, it's obsolete. The align attribute of your div is depricated, so better don't use this one too.

For having the divs in one line, take a look at display: inline-block.

div {
  font-weight: bold;
  /** Adjust font weight */
  color: grey;
  /** Adjust fonf color */
  display: inline-block; /** to have divs in one line */
}

<div id="container">
  <div id="txt_whatwedo_learnmore">
    To learn more about what exactly we can do for you and further info about timelines and pricing, click
  </div>
  <a id="txt_whatwedo_learnmore2" style="text-decoration:none" color="black" href="./pdf/Pricing_App_Dev_2019_Ger.pdf">here.</a>
  <div id="txt_whatwedo_learnmore3">
    (prices may vary).
  </div>
</div>

[font tag is obsolete](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font) - not deprecated: [Difference between obsolete and deprecated](https://stackoverflow.com/questions/9208091/the-difference-between-deprecated-depreciated-and-obsolete/9208164) — Pete, Apr 12 '19 at 14:30

HTML: Get text made up from different elements be shown in one line (link and text)

3 Answers3