如何在导航栏的右侧正确显示图像？

Question

我附上我的小提琴。当你看到它时，你会在右上角看到＆＃34; Account＆＃34;和＆＃34;退出＆＃34;。而不是＆＃34; Logout＆＃34;文字，我希望有一个＆＃34; off＆＃34;您将在CSS部分中找到的图像。我该怎么做？

URL: https://jsfiddle.net/mikoo1991/pk6baz1z/1/embedded/result/

Answer 1

此处的其他答案解决了您的问题，即您忘记在HTML中添加ID。但是，我想指出，添加这样的背景图像并不是实现所需结果的最佳方法。

老实说，你最好使用像FontAwesome这样的图标，这正是它们的用途：

只需将此添加到您的头标记：

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

或者将其添加到您的css文件中：

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

然后更新的html看起来像这样： <li><a href="#">Logout<i class="fa fa-power-off mar-l-10"></i>

以下是您的要求：

这是更新的jsFiddle

我对你的CSS做了一些调整，使它看起来很好用的图标。另外，我将标题上的height:7%更改为55px。恕我直言，使用百分比作为标题是一个坏主意，因为它会在移动设备上缩小太多，并且大多数标题都是固定高度，因此明确设置它通常是安全的。

如果您只想要图标，只需删除文本并根据需要调整填充/字体大小。

Answer 2

看起来好像是在尝试将一个容器嵌入到列表项中。

列表项仅允许嵌入内联元素，即span，a。

如果您使用logout-btn作为标签中的ID，您将看到图像显示（需要额外的样式）。

Material.testStr

jsfiddle - 仅仅是图像显示的一个例子 - 我没有额外的样式来让图像显示在需要的位置。

Answer 3

<li><a id="logout-btn" href="#">
....
</a></li>

我刚刚将id do添加到你的链接标记中，并在html列表项中添加了....个字符，以便为图像背景添加宽度。然后将opactiy变为零，向右移除float，以及其他一些样式应用，见下文。

#logout-btn {
border: 0px solid black;
background-image:url('https://cdn3.iconfinder.com/data/icons/token/128/Power-Shutdown.png');
background-size: contain;
background-repeat: no-repeat;
color: rgba(0, 0, 0, 0)
}

这里是jsfiddle