带有“float:right”的 h1 显示不正确的 css答案

【问题标题】：h1 with "float:right" displayed incorrect css带有“float:right”的 h1 显示不正确的 css
【发布时间】：2011-06-15 18:20:54
【问题描述】：

网络奇迹每天都在出现，这就是问题所在。我已将 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>

【问题讨论】：

显示：内联块；完全不影响局势...
在什么浏览器中？在 Win764 上的 Chrome/Opera 和 IE8 中对此进行了测试，并且工作正常。
这对我来说在 IE 和 FireFox 中都可以。你用的是什么 DOCTYPE？
doctipe 是 ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
它适用于所有浏览器

标签： html css

【解决方案1】：

我猜你也将其上方的菜单浮动到右侧，这样在菜单左侧留下了足够的空间来容纳一个字那么窄的标题。

如果您不希望将clear: both 上移到之前的浮点数旁边，请在h1 上设置clear: both。

【讨论】：

我试过它显示在右侧，但标题下降到内容 div
这是一个不同的问题：stackoverflow.com/questions/4009931/…

【解决方案2】：

这是我根据大卫建议的解决方案，效果很好：

.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;
    }

谢谢大家的帮助

【讨论】：