Question

自从我刚开始以来，我在html和css中都很棒。我正在尝试在创作中实现某些内容，但我不知道删除标题中的自动输入。

@import url(https://fonts.googleapis.com/css?family=Fjalla+One);


html{
  height: 100%;
}

body{
  font-family: 'Fjalla One', sans-serif;
  background: linear-gradient(to bottom, #405166 0%, #656f6f 100%);
}

.container{
  margin: auto;
}


h1{
  text-transform: uppercase;
  font-size: 42px;
  line-height: 47px;
  letter-spacing: 2px;
  text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
  text-align: center;
}


.title{
  transform: translateX(-50%) rotate(-5deg);
  display: block;
  margin-left:50%;


}

<body>
  <section class="container">
  <h1>
    <br />
    <span class="title" style="color:#e55643;">Burger</span>
    <span class="title" style="color:#2b9f5e;">school</span>
    <span class="title" style="color:#f1c83c;">afspraken</span>
  </h1>
</section>

</body>

我希望汉堡和学校能够在不删除颜色的情况下彼此相邻。

enter image description here

Answer 1

.title { display: block }导致元素分裂成新行。使用display: inline-block将允许您rotate元素，同时将它们保持在同一行。

.title{
  transform: rotate(-5deg);
  display: inline-block;
}

补充阅读：https://css-tricks.com/almanac/properties/d/display/

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Fjalla+One);


html{
  height: 100%;
}

body{
  font-family: 'Fjalla One', sans-serif;
  background: linear-gradient(to bottom, #405166 0%, #656f6f 100%);
}

.container{
  margin: auto;
}


h1{
  text-transform: uppercase;
  font-size: 42px;
  line-height: 47px;
  letter-spacing: 2px;
  text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
  text-align: center;
}


.title{
  transform: rotate(-5deg);
  display: inline-block;
}

＆＃13;

<body>
  <section class="container">
  <h1>
    <br />
    <span class="title" style="color:#e55643;">Burger</span>
    <span class="title" style="color:#2b9f5e;">school</span>
    <span class="title" style="color:#f1c83c;">afspraken</span>
  </h1>
</section>

</body>

＆＃13;

Answer 2

试试这个，......不确定这是你想要的

<body>
  <section class="container">
  <h1>
    <br />
    <span class="title" >
       <label style="color:#e55643;">Burger</label>
       <label style="color:#2b9f5e;">school</label>
    </span>
    <span class="title" style="color:#f1c83c;">afspraken</span>
  </h1>
</section>

</body>

////////删除标签之间的空格。

<body>
  <section class="container">
  <h1>
    <br />
    <span class="title" >
       <label style="color:#e55643;">Burger</label><label style="color:#2b9f5e;">school</label>
    </span>
    <span class="title" style="color:#f1c83c;">afspraken</span>
  </h1>
</section>

删除标签之间的空格，它应该在没有空格的同一行上

Answer 3

  <h1>
<br />
  <span class="title" style="color:#e55643;">Burger</span><span class="title" style="color:#2b9f5e;">school</span><span class="title" style="color:#f1c83c;">afspraken</span>

你现在之间没有差距：）

只是在相同的行中写入跨度，而不是在不同的行上写

让我知道这是否有效

如何在css中停止自动输入？

3 个答案: