HTML CSS响应段落标记 [英] HTML CSS Responsive paragraph tag
问题描述
我正在设计一个网页，我快完成了，但是有一个小问题似乎无法解决.
I am designing a webpage and I am almost finished but there is a small issue that I can't seem to figure out.
HTML:
<html>
<head>
<style>
* {margin:0; padding:0; text-indent:0; }
.float-box-footer{display:inline-block;position:relative;height:37px;background-color:#accb32;max-width: 860px;width: auto\9;}
.p4{font-size: 12pt; color: black; padding-left:5pt; left:0; top:7pt; font-family:National, Arial, sans-serif;position:relative;}
.p5{font-size: 7pt; color: black; padding-left:465pt;}
</style>
</head>
<body>
<div class='float-box-footer'>
<p class="p4">Learn more <a href="http://www.google.com" alt="" >Google.com</a>
</p>
<p class="p5">© 2016 Google Google of Google. All rights reserved.</p>
</div>
</body>
</html>
运行代码时，它会显示带有文本的绿色条.明智地调整网页宽度的大小时，绿色条会随着网页缩小并保持适当的大小.但是，最右边的文本不会这样做.一旦走到最远，它就会消失并开始包裹.我需要文本与绿色栏一起移动.
When you run the code it shows the green bar with text in it. When you resize the web page width wise the green bar shrinks along with the webpage and stays the proper size. However, the text in the far right does not do that. Once you go so far over it goes out of view and starts wrapping. I need the text to move along with the green bar.
我被困在这部分上，似乎无法弄清楚.有人可以帮我解决我没有做的事情吗?
I am stuck on this part and can not seem to figure it out. Can you anyone please help me out on what I am not doing?
提前谢谢
推荐答案
如果您希望绿色条响应浏览器窗口的宽度，则可以将.float-box-footer上的宽度设置为100％.百分比值将随窗口调整.
If you want the green bar to respond to the width of the browser window, I would set your width on .float-box-footer to something like 100%. A percentage value will adjust with the window.
您现在面临的问题是.float-box-footer的宽度是由其中的子元素定义的. .p5上的填充值强制绿色框打开.如果您给.float-box-footer一个流体宽度值(例如100％)并将text-align: right;或float: right;扔到.p5上，则您应该有生意.
The problem you're facing now is that the width of .float-box-footer is being defined by the children elements inside there. The padding value on .p5 is forcing the green box open. If you give .float-box-footer a fluid width value like 100% and throw a text-align: right; or float: right; onto .p5 you should be in business.
I'd suggest reading up on the fundamentals of the CSS box model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
这篇关于HTML CSS响应段落标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
