Question

在我的示例中，当您减小窗口的宽度时，内容会在左侧被切断。我想在需要时滚动条，但内容要移动，因此桌子左边缘位置不会变为负数。在这种情况下，表格不居中。

内容将是动态的（文本长度），移动/桌面案例就是它的原因。是唯一的解决方案动态Javascript基于窗口宽度设置？是否有另一种方法可以在不使用left的情况下使table元素居中：-50％？

<div class="emergencyContainer">
  <table>
    <tr>
      <td class="emergencyCol1"><h3>Service:</h3></td>
      <td class="emergencyCol2"><h3><a target="_blank" href="tel:1-800-555-5555">1-800-555-5555</a></h3></td>
    </tr>
    <tr>
      <td class="emergencyCol1"><h3>Website:</h3></td>
      <td class="emergencyCol2"><h3><a target="_blank" href="http://www.test.com">http://www.test.com/</a></h3></td>
    </tr>
  </table></div>

CSS

.emergencyCol1 {
    margin:0;
    padding:0;
  text-align:right;
    height: 1.5em;
  white-space: nowrap;
}

.emergencyCol2 {
    margin:0;
    padding-left: 0.3em;
    text-align: left;
    height: 1.5em;
  white-space: nowrap;
}
.emergencyContainer{
  float: right;

  position: relative;
  left: -50%; 
  text-align: left;
}
.emergencyContainer > table {
  position: relative;
  left: 50%;

}

Answer 1

查看此代码。我只更改紧急容器和表css

＆＃13;

.emergencyCol1 {
	margin:0;
	padding:0;
  text-align:right;
	height: 1.5em;
  white-space: nowrap;
}

.emergencyCol2 {
	margin:0;
	padding-left: 0.3em;
	text-align: left;
	height: 1.5em;
  white-space: nowrap;
}
.emergencyContainer{
  overflow:auto;
}
.emergencyContainer > table {
  margin:auto;
}

＆＃13;

<div class="emergencyContainer">
  <table>
    <tr>
      <td class="emergencyCol1"><h3>Service:</h3></td>
      <td class="emergencyCol2"><h3><a target="_blank" href="tel:1-800-555-5555">1-800-555-5555</a></h3></td>
    </tr>
    <tr>
      <td class="emergencyCol1"><h3>Website long:</h3></td>
      <td class="emergencyCol2"><h3><a target="_blank" href="http://www.test.com">http://www.test.com/extra/long/now/fit</a></h3></td>
    </tr>
  </table>
</div>

＆＃13;

Answer 2

当您需要调整大小时，JavaScript会有很大帮助，具体取决于是否显示元素，例如横条。正如您所说，随着窗口调整大小，您可以动态调整表的大小。是的，向窗口添加onresize事件，并将容器（甚至正文）宽度值设置为window.innerWidth属性的百分比值。

相信我。设置百分比不是诀窍。我想到的是那些改变样式的事件，比如调整窗口大小，都是由JavaScript事件控制的。我并不认为CSS是动态的。即便如此，您也可以查看this以查看它是否适合您（或编写我上面写的脚本）

如果元素变得比窗口更宽，则DIV中的中心元素不会切断左内容

2 个答案: