gpt4 book ai didi

html - Glyphicons 在 Firefox 中没有正确对齐

转载 作者:太空宇宙 更新时间:2023-11-04 02:24:12 26 4
gpt4 key购买 nike

我正在尝试创建一个页面来显示应用程序、应用程序所在的环境(开发、测试、生产等),最后是应用程序运行的主机。

在我们的后端,我们进行了设置,以便可以将应用程序设置为主动或被动,也可以将主机设置为主动或被动。我添加了可视化应用程序和主机状态的字形图标。

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

https://jsfiddle.net/zc419hwa/11/

最佳答案

在 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com