Html 我需要将ul水平居中，但使用“位置：绝对”、“左”和“变换”会在宽度/边距上产生奇怪的行为

我正在制作一个简单的多语言网页的语言导航。 在大型视口上，一切都正常，但一旦我们减小视口的大小，宽度或边距就会发生奇怪的变化，不确定哪一个会受到影响，因为不应该定义它们，但肯定会有干扰

编辑：奇怪的行为是，联邦制药公司开始打破的方式太快。当其宽度超过父级的50%而不是常规的100%时，它似乎破裂。导致它的是左边和变换。位置和底部按预期工作

如果我只是显示它，那么就更容易了，所以我做了一把小提琴，只要压缩视图端口，您就会看到：

显然，我需要发布代码，所以下面是html：

<ul id="languageHolder">
    <li class="ColumnDevider">
        <svg x="0px" y="0px" width="2px" height="1px" viewBox="0 0 2 1">
             <rect x="0" y="0" fill="#000000" width="2" height="1"></rect>
         </svg>
    </li>
    <li class="Column">
        <a class="button" id="pt">Português</a>
    </li>
    <li class="ColumnDevider">
        <svg x="0px" y="0px" width="2px" height="1px" viewBox="0 0 2 1">
             <rect x="0" y="0" fill="#000000" width="2" height="1"></rect>
        </svg>
    </li>
    <li class="Column">
        <a class="button" id="es">Español</a>
    </li>
    <li class="ColumnDevider">
        <svg x="0px" y="0px" width="2px" height="1px" viewBox="0 0 2 1">
             <rect x="0" y="0" fill="#000000" width="2" height="1"></rect>
        </svg>
    </li>
    <li class="Column">
        <a class="button" id="de">Deutsch</a>
    </li>
    <li class="ColumnDevider">
        <svg x="0px" y="0px" width="2px" height="1px" viewBox="0 0 2 1">
             <rect x="0" y="0" fill="#000000" width="2" height="1"></rect>
        </svg>
    </li>
</ul>

我不知道还有什么可以尝试的。欢迎提出任何建议。谢谢

---

ps：我们的目标是保持宽度的动态性，因为显示语言是根据一些因素动态显示的，将来可以添加更多的语言。

我不确定我们是否相互理解，但“发生了一些奇怪的事情”意味着行开始中断，对吗

因此，首先要简化一些内容-您不需要任何设备，使用

li

标记的边框

<ul id="languageHolder">
    <li>
        <a class="button" id="pt">Português</a>
    </li>
    <li>
        <a class="button" id="es">Español</a>
    </li>
    <li>
        <a class="button" id="de">Deutsch</a>
    </li>
</ul>

“媒体查询”可以帮助您为某些宽度/高度特定的情况定制css，在您的情况下，它太窄了。现在边界消失，物品不再浮动，所以一个放在另一个下面

---

下面是JSFIDLE（更新版）：

CSS转换的要点是它们是视觉上的变化……它们实际上不会改变元素的物理位置

这样，尽管元素在视觉上处于中间，浏览器记得它实际上在哪里，当左侧到达父边缘时，断线开始出现。

要解决这个问题，您应该通过添加

空白：nowrap至
ul

我还将关闭
内联块的浮动，然后隐藏“border”
li
，因为它们不会很好地断开

然后使用媒体查询（根据需要）将
li
拆分为一列


html，主体，
ul，
李{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
}
html{
字体大小：100%；
-ms文本大小调整：100%；
-webkit文本大小调整：100%；
}
身体{
线高：1；
背景：#FFFFFF；
颜色：000000；
填充：0；
利润率：30像素
}
a:参观了{
颜色：#000000；
}
保险商实验室{
填充：0；
保证金：0；
列表样式类型：无；
背景：浅蓝色；
}
#语言持有者{
列表样式：无；
位置：绝对位置；
底部：30px；
左：50%；
转化：translateX（-50%）；
-ms转换：translateX（-50%）；
-webkit转换：translateX（-50%）；
空白：nowrap；
}
#语言持有者李{
显示：内联块；
填充：0；
高度：18px；
}
.栏目{
文本对齐：居中；
字体系列：“PTSans_Regular”；
利润率：0.10px；
光标：指针；
}
专栏作家{
背景色：#000000；
背景：#000000；
}
@媒体屏幕和屏幕（最大宽度：480px）{
#语言持有者李{
显示：块；
}
#语言持有者李·迪维德{
显示：无；
}
}



葡萄牙



Español



德国



什么是“奇怪的事情发生了”？请澄清您不喜欢发生的事情，以及在较小的视口宽度下应该发生的事情。li的开始过早中断。UL的以太宽度似乎是50%左右。ul应保持一条直线，直到视口小于实际尺寸。（我在最后一页的正文周围也有一个小的空白，但行为也发生在这里，与此无关。）是的，问题是ul开始中断得太快了。当50%的视口比ul小时，它似乎被破坏。但这没有任何意义。我想找到一种方法来阻止它在50%时破裂，并像正常情况一样使用100%。我不明白是什么让联邦调查局这么做的。我知道是什么原因造成的，是我设置的左边和变换，就像预期的那样，只是绝对和底部定位工作。嗯，这是因为左边：50%；所以UL元素只占屏幕的50%，我在路上，我会在我回家的时候尝试修复它。这里，你可以说：语言持有者Li显示：内联块；}而不是浮点：左，并设置UL宽度为100%。我将更新看起来已经完成了任务的代码。但在任何情况下，我希望有人能解释什么是限制ul的宽度，而使用浮动左结合这个特定的定位。
<ul id="languageHolder">
    <li>
        <a class="button" id="pt">Português</a>
    </li>
    <li>
        <a class="button" id="es">Español</a>
    </li>
    <li>
        <a class="button" id="de">Deutsch</a>
    </li>
</ul>

#languageHolder{
    list-style: none;
    position:absolute;
    bottom:30px;
    left:50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
     width: 100%;
    text-align: center;
}

#languageHolder li{
    height:18px;
    text-align:center;
    font-family:"PTSans_Regular";
    padding:0 10px; 
    cursor:pointer;
    border-right: 2px solid #000;
    display: inline-block;
}
#languageHolder li:first-child{
    border-left: 2px solid #000;
}

@media (max-width: 200px){ /*small sizes = set your "small size"*/
    #languageHolder li{
        border-left:0px !important;
        border-right:0px;
        display: block;
    }
}