Question

问题：

我正在我的个人网站上工作，但我遇到了问题。我想从我的SEO标题（h1和h2）中受益。但是当我改变我的线条中的特定单词时，它们只是“跳跃”在彼此之下。你怎么解决这个问题？

注意

我还制作了一个JSFiddle，让我更清楚我有什么问题，你可以在这里找到它：

h1.small {
    font-size: 13px;
    color: #787878;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    overflow: hidden;
    white-space: nowrap;
}

h2.small {
    font-size: 13px;
    color: #787878;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    overflow: hidden;
    white-space: nowrap;
}

p {

    color: #787878;
    font-size: 13px;
}

<p>Hallo! Mijn naam is
<h1 class="small">***********</h1>, ik ben een <h2 class="small">***********</h2> <h2 class="small">***** developer</h2> en <h2 class="small">Grafisch *********</h2>. *****************************************************************************************

Answer 1

将标题（ h1和h2 ）设为display:inline。默认值为block。

h1.small {
    font-size: 13px;
    color: #787878;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    overflow: hidden;
    white-space: nowrap;
  
  display:inline;
}

h2.small {
    font-size: 13px;
    color: #787878;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    overflow: hidden;
    white-space: nowrap;
  
  display:inline;
}

p {

    color: #787878;
    font-size: 13px;
}

<p>Hallo! Mijn naam is
<h1 class="small">******************</h1>, ik ben een <h2 class="small">**********</h2> <h2 class="small">******** developer</h2> en <h2 class="small">*********** vormgever</h2>. **************************************************************** doormiddel van een goede <h2 class="small">website</h2> / <h2 class="small">webshop</h2> en een goede <h2 class="small">huisstijl</h2>. ************************************************. Na velen jaren leren kan ik <h2 class="small">websites</h2> *************************</p>

在一行上保留所有类型的文本

1 个答案: