跨度跳转到新行，即使它有内联块？

所以我读过多次显示：inline-block;在你的范围将修复它。但我无法让它为我工作。可能我只是错过了一些东西，但我想在这方面提供帮助。跨度跳转到新行，即使它有内联块？

<html> 
    <head> 
     <style> 
      @font-face { 
       font-family:myRobotoRegular; 
       src:url(fonts/Roboto-Regular.ttf); 
      } 
      @font-face { 
       font-family:myRobotoBold; 
       src:url(fonts/Roboto-Bold.ttf); 
      } 
      @font-face { 
       font-family:myRobotoLight; 
       src:url(fonts/Roboto-Light.ttf); 
      } 
      body { 
       background-color:black; 
       color:white; 
      } 
      h1 { 
       font-family:myRobotoBold; 
       text-align:center; 
      } 
      .right { 
       float:right; 
       width:49%; 
      } 
      .individual { 
       height:100%; 
       margin:0 auto; 
       overflow-y:scroll; 
       padding-right:10px; 
       text-align:left; 
       width:440px; 
      } 
      .bannerGreen { 
       background-color:#0D731D; 
       padding:10px; 
      } 
      .bannerTitle { 
       font-family:myRobotoBold; 
      } 
      .bannerRarity { 
       font-family:myRobotoLight; 
      } 
      .description { 
       background-color:black; 
       font-family:myRobotoRegular; 
       padding:20px 10px 10px 10px; 
      } 
      .quotes { 
       color:#C0B9A7; 
      } 
      .orangeStat { 
       color:#F26A1C; 
       display:inline-block; 
       font-family:myRobotoBold; 
       font-size:20px; 
      } 
      .yellowStat { 
       color:#FFD30B; 
       display:inline-block; 
       font-family:myRobotoBold; 
       font-size:20px; 
      } 
      .imgDiv { 
       float:right; 
       margin-top:-10px; 
      } 
      .img { 
       height:58px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="mainDiv"> 
      <div class="right"> 
       <div class="individual"> 
        <h1> 
         CATEGORY 
        </h1> 
        <div class="bannerGreen"> 
         <div class="imgDiv"> 
          <img class="img" src=""> 
         </div> 
         <span class="bannerTitle"> 
          TITLE 
         </span> 
         <br> 
         <span class="bannerRarity"> 
          SUBTITLE 
         </span> 
        </div> 
        <div class="description"> 
         DESCRIPTION 
         <span class="yellowStat"> 
          STATISTICS 
         </span> 
         DESCRIPTION 
         <span class="orangeStat"> 
          A STATISTIC 
         </span>. 
        </div> 
        <br> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

在“一个统计”的“A”应该很好地能够是在第一行上，而是它遵循整个跨度到第二行。

（如果你认识到这一点的奖励积分。））

编辑：内联，而不是inline-block的肯定能解决问题，但随后的时期.orangeStat跨度跳跃从跨度走了。我希望它不会跳，但我不希望它被包含在跨度中。有没有办法得到那个？

来源

2017-01-30 JanR

你尝试设置'显示：内联;''为.orangeStat'？ – Banzay

@Banzay是的，但是当我这样做的时候，这段时间会跳出STATISTIC，或者放在它后面的任何东西，我不想把它作为标准。我也不希望那段时间拥有.orangeStat – JanR

的属性在这种情况下，不需要内联块。你的空间不足（.individual width）。 – antesoles

好吧，如果你想在A和统计进行单独处理，那么你就应该把他们的个人（inline-）块元素：

<span class="orangeStat"> 
    A 
</span> 
<span class="orangeStat"> 
    STATISTIC 
</span>

OR（编辑）：

使用inline而不是inline-block，并消除统计和周期之间的空间，尝试这样的事情：

<span class="orangeStat"> 
    A STATISTIC<!-- 
--></span>.

来源

2017-01-30 09:26:30 antesoles

我不希望他们成为个人。 – JanR

然后你将很难解决这个问题:)要么你使用的内联块将被视为1块元素或者你正在使用2 - 那么你可以期望他们被单独处理。这就是他们的工作方式。 – antesoles

那么有人已经给出了一个很好的解决方案，即使用内联而不是内联块。现在我只想把那段时间恢复原状。 – JanR

增加外容器

.individual { 
    width: 490px; 
}

中的词是在第二行来的宽度，因为在容器中没有足够多的空间。

或者

减少yellowStat和orangeStat

的字体大小

来源

2017-01-30 09:19:00

用inline而不是inline-block测试.orangeStat证明字母A有足够的空间放置在第一行。 – JanR

减小字体大小以使其适合那里？ –

不幸的是，它不适用于内嵌块。我的意思是，我只能把它缩小到两个词都会在第一行结束的地步。并且使用内联使得时间段从跨度跳开。 – JanR

跨度跳转到新行，即使它有内联块？

回答

相关问题