HTML：获取由不同元素组成的文本显示在一行中（链接和文本）

Question

因此，在我的网页中，用户可以更改语言。这很容易实现，但是问题在于由多个元素组成的文本。

想象一下：“...有关更多信息，请单击此处。”以“这里”为链接。

起初，我只是用<p <a>/> 做的，但是，这导致文本不再在一行中，而是在不同的行中。

这是有问题的代码：

                    <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>

我可以通过脚本通过 ID 访问每个元素，但它们都位于不同的行中，如下所示：

我如何让它在一行中，每个元素仍然有其唯一的 ID？

Answer 1

使用<span> 标签而不是<div> 标签。跨度为display: inline，div 为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>

---

另外，请不要使用<font>align="center"和color="black"，这些都是90年代初期的非常古老的HTML，不应该再使用了！使用 CSS 可以更轻松地操作此代码，您也应避免使用内联 style="..."。

这里有一个更好的想写相同的代码：

#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>

Answer 2

div 元素是块级元素，块级元素出现在屏幕上就好像它们前后有一个换行符。你可以使用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>

Answer 3

你不应该使用font 标签，它已经过时了。您的 div 的 align 属性已被弃用，所以最好不要也使用这个。

对于将 div 放在一行中，请查看 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>