图像未以内嵌方式显示

Question

我正在使用bootstrap，我想显示一个图像，然后是一些文本。但是，无论我做什么，文本都会碰到下一行，即使图像后面有足够的空间。这是代码：

.gold {
    display: inline;
}

我认为默认情况下图像应该是内联的，但以防万一我在css表中添加了这个类：

type alias Letter = Char
type GuessedLetter = Guessed Letter | Unguessed

有谁可以解释为什么这不起作用？

Answer 1

您的问题在于您使用内联CSS手动设置为width的{​​{1}}。它占用的宽度超过了整个宽度（100％），没有剩余空间，因此文本会碰到下一行。

如果删除该段代码或将其更改为更小的代码，它将按预期工作。

示例：https://jsbin.com/quyogodawa/edit?html,output

Answer 2

当我遇到这些问题时，我总是会在浏览器中进入Dev Tools。然后，您可以转到CSS选项卡，选择页面区域，它将显示应用于该部分的所有样式。 您可以调整每种样式，动态添加/删除，并在屏幕上看到它的变化，以找出它为什么没有按照您的想法进行操作。

每个浏览器都有自己的开发工具，按F12即可访问它们。

Answer 3

尝试更改宽度和高度值：

Logger log = Logger.getLogger("Logger");
log.setLevel(Level.ALL);
log.log(Level.INFO, "Reading Configuration File");

我认为您将.gold { display: inline; width: auto; height: 100%; } 设置为120％的事实迫使width文字采取新行

Answer 4

似乎是我自己的.splash类的问题，当我删除它时，一切正常。不确定为什么它会导致问题：

.splash {
    font-family: Ubuntu, sans-serif;
    margin-bottom: 20px;
}