[英]How do I give an element padding without the text going off the right side of mobile screen?
I am using responsive design that gives an element 100% width. 我正在使用响应式设计,使元素的宽度为100%。 There are three paragraphs of text within the element and I want to give the text 10px of padding so it isn't sitting right up against the edge of the screen. 元素内有三段文字,我想给文字填充10px,这样它就不会紧贴屏幕边缘。
I use overflow-x: hidden;
我用overflow-x: hidden;
on the body, html
elements to stop sideways scrolling on phone browsers. 在手机上,停止在电话浏览器上横向滚动的body, html
元素。
Currently when I give the container element 10px of padding the text runs off the right side of the screen. 当前,当我给容器元素填充10px时,文本从屏幕右侧移出。
How can I give an element 10px padding, 100% width and have a 10px gap between the text and the right edge of the mobile screen? 如何为元素提供10px的填充,100%的宽度以及文本和移动屏幕右边缘之间的间距为10px?
You can use following CSS for that element (or all elements if you want!), 您可以将以下CSS用于该元素(如果需要,也可以使用所有元素!),
element
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; /* standard */
}
Please refer to, 请参阅,
http://www.paulirish.com/2012/box-sizing-border-box-ftw/ http://www.paulirish.com/2012/box-sizing-border-box-ftw/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.