Html CSS结果在浏览器中以不同方式显示

我正在用span中的一些数据编写一个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>

我做了一把小提琴，可以找到

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

---

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

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

---

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

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

试试这个：

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

因为您为

span.links

设置了

width

。我删除了它，并给它

100%的宽度

和

text align:center

以及

display:inline block

。现在，它可以在所有主要浏览器（如Chrome或FF）上使用。

尝试以下方法：

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

---

因为您为

span.links

设置了

width

。我删除了它，并给它

100%的宽度

和

text align:center

以及

display:inline block

。现在，它可以在所有主要浏览器（如Chrome或FF）上使用。

以下是更新的代码，现在您可以使用它而不会遇到问题：

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

身体{
保证金：0；
填充：0
}
.标题{
宽度：100%；
高度：55px；
背景：ff8800；
填充：20 0；
边框底部：1px实心#000；
}
.左{
浮动：左；
宽度：31%；
左边距：13px；
字体大小：粗体；
颜色：#fff；
}
.对{
浮动：对；
宽度：33%；
右边距：13px；
文本对齐：右对齐；
字体大小：粗体；
颜色：#fff；
}
.中心{
浮动：左；
宽度：32%；
}
.标题ul{
列表样式：无；
宽度：300px；
保证金：18px自动；
}
李先生{
浮动：左；
右边距：20px；
}
状态：（已工作/总计）-23/38





效率：15.05

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

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

身体{
保证金：0；
填充：0
}
.标题{
宽度：100%；
高度：55px；
背景：ff8800；
填充：20 0；
边框底部：1px实心#000；
}
.左{
浮动：左；
宽度：31%；
左边距：13px；
字体大小：粗体；
颜色：#fff；
}
.对{
浮动：对；
宽度：33%；
右边距：13px；
文本对齐：右对齐；
字体大小：粗体；
颜色：#fff；
}
.中心{
浮动：左；
宽度：32%；
}
.标题ul{
列表样式：无；
宽度：300px；
保证金：18px自动；
}
李先生{
浮动：左；
右边距：20px；
}
状态：（已工作/总计）-23/38





效率：15.05

OMG！Flex与内嵌表混合，与浮动混合。。。。它的行为不同是正常的。您有一个宽度为200px的

flex

项目。它不合适。Chrome缩小了内联表，但firefox运行良好。只要给这个元素增加更多的宽度，它就会工作（270像素对于我的屏幕来说就足够了）。但是，你必须学习布局来避免这种事情（flex+float+table，奇怪的方式）你的代码有很多css错误的代码你可以将css简化为html中的样式，如果你愿意，我可以为你制作：）嗨@ahmdabos，是的，这将非常有帮助。谢谢你，你好，MarcosPérezGude，我的错，对不起。我在网上搜索并使用了它。天哪！Flex与内嵌表混合，与浮动混合。。。。它的行为不同是正常的。您有一个宽度为200px的

flex

项目。它不合适。Chrome缩小了内联表，但firefox运行良好。只要给这个元素增加更多的宽度，它就会工作（270像素对于我的屏幕来说就足够了）。但是，你必须学习布局来避免这种事情（flex+float+table，奇怪的方式）你的代码有很多css错误的代码你可以将css简化为html中的样式，如果你愿意，我可以为你制作：）嗨@ahmdabos，是的，这将非常有帮助。谢谢你，你好，MarcosPérezGude，我的错，对不起。我在网上搜索并使用了它。