我需要将 ul 水平居中，但使用 position:absolute、left 和 transform 会导致 width/margin 出现奇怪的行为

Question

我正在处理一个简单的多语言网页的语言导航。在大视口上一切正常，但一旦我们减小视口的大小，宽度或边距就会发生一些奇怪的事情，不确定哪个受到影响，因为应该定义 none 但肯定是干扰。

编辑：奇怪的行为是 ul 过早开始中断。当它的宽度超过父级的 50% 而不是常规的 100% 时，它似乎会崩溃。造成它的是左和变换。位置和底部按预期工作。

如果我只显示它会更容易，所以我制作了一个 fiddle，只需压缩视口，您就会看到：

http://jsfiddle.net/ricardojcmarques/vrfvjmdr/

显然我需要 post 代码所以这里是 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>

和 css:

html,body,div,h1,h2,p,a,img,ul,li,form,label{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

html {
    font-size: 100%;
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
}

body{
    line-height: 1;
    background: #FFFFFF;
    color: ##000000;
    padding:0;
    margin:30px
}

a:visited{
    color:#000000;
}

ul{
    padding:0;
    margin:0;
    list-style-type: none;
}

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

#languageHolder li{
    float:left;
    padding:0;
    height:18px;
}

.Column{
    text-align:center;
    font-family:"PTSans_Regular";
    margin:0 10px;
    cursor:pointer;
}

.ColumnDevider{
    background-color:#000000;
    background:#000000;
}

我不知道该多试试什么。欢迎提出任何建议。先谢谢了。

ps:objective是为了保持宽度动态，因为显示语言是根据几个因素动态显示的，以后可以添加更多语言。

Answer 1

我不确定我们是否理解对方，但是"something weird happend"意味着线开始断了，对吧？

所以，首先要简化一些事情 - 您不需要任何开发人员，为 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（我用过你的，最后一个未更改的 css 用于 "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;
    }
}

媒体查询可帮助您针对某些 width/height 特定情况定制 css，在您的情况下它太窄了。现在边框消失了，项目不再浮动，所以一个放在另一个下面。

这里是 JSFIDDLE（更新）：http://jsfiddle.net/kybernaut/pkeepkgd/2/

Answer 2

关于 CSS 变换的要点是它们是 视觉上的 变化...它们实际上并没有改变元素的物理位置。

因此，尽管该元素在视觉上位于中间，但浏览器会记住它的实际位置，并且当左侧到达父级边缘时，换行符开始出现。

为了解决这个问题，您应该通过将 white-space:nowrap; 添加到 ul 来禁用换行。

我也会为 inline-block 切换掉浮动，然后隐藏 "border" li 因为它们不会很好地破坏。

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

html,body,
ul,
li {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
html {
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  line-height: 1;
  background: #FFFFFF;
  color: ##000000;
  padding: 0;
  margin: 30px
}
a:visited {
  color: #000000;
}
ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  background: lightblue;
}
#languageHolder {
  list-style: none;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  white-space: nowrap;
}
#languageHolder li {
  display: inline-block;
  padding: 0;
  height: 18px;
}
.Column {
  text-align: center;
  font-family: "PTSans_Regular";
  margin: 0 10px;
  cursor: pointer;
}
.ColumnDevider {
  background-color: #000000;
  background: #000000;
}
@media screen and (max-width: 480px) {
  #languageHolder li {
    display: block;
  }
  #languageHolder li.ColumnDevider {
    display: none;
  }
}

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

JSfiddle Demo

我需要将 ul 水平居中，但使用 position:absolute、left 和 transform 会导致 width/margin 出现奇怪的行为

I need to horizontally center a ul but using position:absolute, left and transform is causing a weird behaviour on width/margin

html

css

alignment