<div id="divInnerFirst">
<div id="divTitleHeaderUC">
<span id="spanTitleHeaderUC">Urgent Care Wait Time</span>
</div>
<div id="divSubTitleUC">
<div id="smallText" style="position: absolute; bottom: 0; width: 100%; color: #000000; text-align: center;">If you are experiencing a life-threatening emergency, call 911 or go to your nearest emergency room. Do not go to the urgent care center.<br>Estimated wait times are provided for general information only, may change at any time, and may not reflect your actual wait time once you arrive.</div>
</div>
</div>
样式表:
#divTitleHeaderUC {
width: 265px;
height: 40px;
background-color: #FFFFFF;
text-align: center;
box-shadow: inset 0 0 10px rgba(245, 159, 36, 0.5);
position: relative;
}
#divSubTitleUC {
width: 265px;
height: 220px;
background-color: #FFFFFF;
text-align: center;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-box-shadow: #F59F24 0px 2px 3px;
-moz-box-shadow: #F59F24 0px 2px 3px;
box-shadow: #F59F24 0px 2px 3px;
position: relative;
}
#spanTitleHeaderUC {
width: 100%;
height: 40px;
line-height: 40px;
vertical-align: middle;
background-color: #FFFFFF;
font-family: 'blackjarregular';
font-size: 18pt;
color: #F59F24;
font-weight: bold;
}
截图:
正如您从屏幕截图中看到的那样,文本向左和向右移动过多,难以阅读。我怎样才能应用内部填充以使文本不会向左和向右偏移太多?
我尝试向 DIV
添加填充,但它拉伸(stretch)了 divSubTitleUC
。
添加边距会产生以下效果:
最佳答案
拿走宽度,而是给它:
left:0;
right:0;
然后
padding:0 10px;
left
和right
“拉伸(stretch)”元素以尝试触摸父容器的两侧。由于容器是 position:relative;
它永远不会尝试突破父级的边界。
关于html - 如何在不离开区域的情况下应用内部填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22073262/