Question

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

编辑：奇怪的行为是ul很快就开始破坏了。当它超过父母的50％而不是常规的100％时，它似乎正在破裂。造成它的原因是左边和变换。位置和底部按预期工作。

如果我只是展示它会更容易，所以我做了一个小提琴，只是压缩了视口，你会看到：

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

显然我需要发布代码，所以这里是html：

void pause(){
        if(mMediaPlayer.isPlaying()){
            // Pause song
            if(mMediaPlayer!=null){
                mMediaPlayer.pause();
                isPaused = true;
                sendBroadcast(new Intent(PAUSED_PLAYBACK_INTENT));
            }
        }else{
            // Resume song
            if(mMediaPlayer!=null){
                mMediaPlayer.start();
                isPaused = false;
                sendBroadcast(new Intent(RESUMED_PLAYBACK_INTENT));
            }
        }

和css：

<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：目标是保持宽度动态，因为显示语言是根据几个因素动态显示的，将来可以添加更多语言。

Answer 1

我不确定我们是否相互理解，但是＆＃34;一些奇怪的事情发生在＆＃34;这意味着线开始破坏，对吧？

因此，首先要简化一些内容 - 您不需要任何设备，请使用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用于＆＃34; ul＆＃34;）

#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;
    }
}

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

您可以使用JSFIDDLE（已更新）：http://jsfiddle.net/kybernaut/pkeepkgd/2/

Answer 2

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

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

要解决此问题，您应该通过向white-space:nowrap;添加ul来停用换行符。

我还会为inline-block切换浮点数，然后隐藏＆＃34;边界＆＃34; li因为他们不会很好地打破。

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

＆＃13;

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

＆＃13;

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

＆＃13;

JSfiddle Demo

我需要水平居中一个ul，但使用position：absolute，left和transform导致宽度/边距上出现奇怪的行为

2 个答案: