<分区>
我正在处理一个简单的多语言网页的语言导航。 在大视口(viewport)上，一切正常，但一旦我们减小视口(viewport)的大小，宽度或边距就会发生一些奇怪的事情，不确定哪个受到影响，因为它们都不应该被定义，但肯定有一些干扰。
编辑:奇怪的行为是 ul 过早开始中断。当它的宽度超过父级的 50% 而不是常规的 100% 时，它似乎会崩溃。造成它的是左和变换。位置和底部按预期工作。
如果我只显示它会更容易，所以我做了一个 fiddle ，只需压缩视口(viewport)，你就会看到:
http://jsfiddle.net/ricardojcmarques/vrfvjmdr/
显然我需要发布代码，所以这里是 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:目标是保持宽度动态，因为显示语言是根据几个因素动态显示的，将来可以添加更多语言。
最佳答案
我不确定我们是否相互理解，但是“发生了一些奇怪的事情”意味着线路开始中断，对吧？
因此，首先要简化一些事情 - 您不需要任何开发人员，为 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;
}
}
媒体查询可帮助您针对某些特定于宽度/高度的情况定制 css，在您的情况下它太窄了。现在边框消失了，元素不再 float ，所以一个放在另一个下面。
这里是 JSFIDDLE(更新):http://jsfiddle.net/kybernaut/pkeepkgd/2/
关于html - 我需要水平居中 ul 但使用位置 :absolute, 左侧和转换导致宽度/边距出现奇怪的行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31761904/