Question

每天都会出现网络奇迹，这就是问题所在。我已将h1标签定义为div类。这是代码：

.menu h1
{
    width:auto;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:30px;
    color:#2e80bf;
    float:right;
    font-weight:normal;
    font-style:italic;
    margin:0;
    padding:0;
    display:inline-block;
}

我给了它 float：right; ，如果标题是2个或更多单词，它会按预期显示在右侧，但如果标题是单个单词，则它出现在左侧。可能是什么问题？

这是html代码：

<div class="menu">
    <div class="horizontal">
        <ul>
            <li><a href="news.php">акруално</a></li>
            <li><a href="gallery.php">галерия</a></li>
        </ul>
        <h1 style="margin-bottom:10px;">За Фитнес център Кеа Спорт</h1>
    </div>
</div>

.menu h1 {
  width: auto;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: #2e80bf;
  float: right;
  font-weight: normal;
  font-style: italic;
  margin: 0;
  padding: 0;
  display: inline-block;
}

<div class="menu">
  <div class="horizontal">
    <ul>
      <li><a href="news.php">акруално</a>
      </li>
      <li><a href="gallery.php">галерия</a>
      </li>
    </ul>
    <h1 style="margin-bottom:10px;">За Фитнес център Кеа Спорт</h1>
  </div>
</div>

Answer 1

我猜你也将它上面的菜单浮动到右边，这样就在菜单左边留下足够的空间来适应标题，当它像一个单词一样窄时。

如果您不希望它在上一个浮动广告旁边移动，请在clear: both上设置h1。

Answer 2

根据David的建议，这是我的解决方案，并且工作正常：

.menu h1
{
    width:auto;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:30px;
    color:#2e80bf;
    float:right;
    font-weight:normal;
    font-style:italic;
    margin:0;
    padding:0;
    clear:right;
    }

谢谢大家的帮助

h1与“浮动：右”显示不正确的CSS

2 个答案: