我正在尝试创建一个页面来显示应用程序、应用程序所在的环境(开发、测试、生产等)，最后是应用程序运行的主机。
在我们的后端，我们进行了设置，以便可以将应用程序设置为主动或被动，也可以将主机设置为主动或被动。我添加了可视化应用程序和主机状态的字形图标。
glyphicons 应该包含在服务器名称按钮中，如果您在 Chrome 中运行 jsfiddle，您将看到它的外观。
问题出在 Firefox 中，字形被向下推到看起来像新行的地方。我不希望发生这种情况 - 我希望它看起来与 Chrome 中的一样。我已经对属性进行了一些谷歌搜索和检查，但无法确定为什么会发生这种情况以及如何解决。
<body>
<div id="container" class="container-fluid col-lg-10 col-md-10 col-sm-12" role="main">
<div class="app row" id="ATStatsProcessor">
<h4>Application Name</h4>
<div class="environment col-sm-4 col-lg-3">
<h5>Environment Name</h5>
<span class="glyphicon glyphicon-chevron-down pull-right"></span>
<span class="glyphicon glyphicon-chevron-up pull-right"></span>
<div class="host">
<div class="host btn btn-default btn-pressed">
<span class="button-text">Server Name</span>
<span class="state-enabled icon-size-small glyphicon glyphicon-off pull-right"></span>
<span class="state-enabled icon-size-small glyphicon glyphicon-hdd pull-right"></span>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
.app {
color: #818a98;
border-radius: 6px;
margin: 1em;
padding: 1em;
background-color: #e4e9ef;
}
div.environment h5 {
display: inline-block;
max-width: 80%;
}
.environment {
color: #818a98;
border-radius: 6px;
margin: .5em 2.25em;
padding-top: .25em;
padding-bottom: 1em;
background-color: white;
}
.app .environment .host {
display: inherit;
margin: .25em;
}
.host.btn.btn-default {
background-color: #c93135;
color: white;
}
.host.btn.btn-pressed {
background-color: #2f3b46;
color: white;
}
.confirm.btn-success {
background-color: #63a72c !important;
}
.confirm.btn-danger {
background-color: #c93135 !important;
}
body {
background-color: #f8f9fb !important;
}
.icon-size-small {
font-size: x-small;
}
.state-enabled {
color: green;
}
.button-text {
display: inline-block;
max-width: 85%;
overflow-x: hidden;
}
最佳答案
在 Firefox 中，似乎 float 清除了具有 white-space: nowrap; 属性的父元素中的所有元素。不知道这是为什么，但它可以很容易地解决。您可以通过几种不同的方式解决此问题:
通过在字形之后移动按钮文本范围来修改您的 HTML 代码，如下所示:
<div class="host btn btn-default btn-pressed">
<span class="state-enabled icon-size-small glyphicon glyphicon-off pull-right"></span>
<span class="state-enabled icon-size-small glyphicon glyphicon-hdd pull-right"></span>
<span class="button-text">Server Name</span>
</div>
--或者--
从您的 .btn 类中删除属性 white-space: nowrap;。
--或者--
通过将此代码添加到您的 CSS 来绝对定位您的字形:
.host {
position: relative;
}
.host .glyphicon {
position: absolute;
top: 0;
right: 0;
margin-top: 5px;
margin-right: 10px;
}
.host .glyphicon-hdd {
margin-right: 21px;
}
关于html - Glyphicons 在 Firefox 中没有正确对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37601756/