Question

我正在编写一个包含一些数据的HTML页面。我试图对齐跨度中的内容。它在Chrome中运行良好，但是当它来到FireFox时，它的显示方式不同。

HTML

<div class="header" id="header">
<span class="totalTime">Status: (Worked/Total) - 23/38</span>
<span class="effeciency">Effeciency : 15.05</span>
<span class="links">
   <span class="casesLink"><a href="index.jsp">Allocated Cases</a></span>
   <span class="reportsLinks"><a href="UsersCounts.jsp">User Counts</a></span></span>
</div>

CSS

.header {
    position: fixed;
    top: 0em;
    left: 0px;
    width: 100%;
    padding-bottom: 3em;
    border-bottom: 1px solid black;
    background: #ff8800;
    color: white;
    font-weight: bold;
}

span.totalTime {
    display: block;
    float: left;
    margin-left: 1.5em;
    position: absolute;
    top: 30px;
}

span.effeciency {
    display: block;
    float: right;
    width: auto;
    margin-right: 2em;
    top: 30px;
    position: relative;
}

span.links {
    display: flex;
    width: 200px;
    height: 100%;
    margin: 0 auto;
    top: 30px;
    position: relative;
}

.links>span {
    display: inline-table;
    padding: 1em;
    padding-bottom: 0em;
    padding-top: 0em;
}

我创造了一个小提琴，可以找到here。

这是工作小提琴全屏输出。要查看正确的结果，请将其粘贴到Chrome浏览器和Firefox浏览器中。

https://jsfiddle.net/pwg69xxu/1/embedded/result/

Answer 1

以下是更新后的代码，现在您可以在不遇到问题的情况下处理它：

<style>
body {
    margin: 0;
    padding: 0
}
.header {
    width: 100%;
    height: 55px;
    background: #ff8800;
    padding: 20 0;
    border-bottom: 1px solid #000;

}
.left {
    float: left;
    width: 31%;
    margin-left: 13px;
    font-weight:bold;
    color:#fff;
}
.right {
    float: right;
    width: 33%;
    margin-right: 13px;
    text-align: right;
    font-weight:bold;
    color:#fff;
}
.center {
    float: left;
    width: 32%;
}
.header ul {
    list-style: none;
    width: 300px;
    margin: 18px auto;
}
.header ul li {
    float: left;
    margin-right: 20px;
}
</style>
<div class="header">
<div class="left"><p>Status: (Worked/Total) - 23/38</p></div>
<div class="center">
<ul>
<li><a href="index.jsp">Allocated Cases</a></li>
<li><a href="UsersCounts.jsp">User Counts</a></li>
</ul>
</div>
<div class="right"><p>Effeciency : 15.05</p></div>
</div>

Answer 2

尝试在下面添加代码以防止字符串换行到另一行：

span.links a
{
    white-space: nowrap;
}

Answer 3

试试这个：

span.links {
    display: inline-block;
    height: 100%;
    margin: 0 auto;
    top: 10px;
    position: relative;
    width: 100%;
    text-align: center;
}

<强> jsFiddle

因为您为width设置了span.links。我删除了100% width和text-align: center以及display: inline-block。现在它适用于所有主流浏览器，如Chrome或FF。

CSS结果在浏览器中显示不同

3 个答案: