如何在文本不离开移动屏幕右侧的情况下给元素填充？答案

【问题标题】：How do I give an element padding without the text going off the right side of mobile screen?如何在文本不离开移动屏幕右侧的情况下给元素填充？
【发布时间】：2014-03-27 20:27:11
【问题描述】：

我正在使用响应式设计，让元素具有 100% 的宽度。元素中有三段文本，我想给文本 10px 的填充，这样它就不会正好靠在屏幕边缘。

我在body, html 元素上使用overflow-x: hidden; 来停止手机浏览器上的横向滚动。

目前，当我为容器元素提供 10 像素的填充时，文本会从屏幕右侧跑出。

如何为元素提供 10 像素的内边距、100% 的宽度并在文本和移动屏幕右边缘之间留出 10 像素的间隙？

【问题讨论】：

标签： html css responsive-design padding

【解决方案1】：

您可以为该元素（或所有元素，如果您愿意！）使用以下 CSS，

element
{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; /* standard */
}

请参考，

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

【讨论】：