我遇到的问题是我试图阻止文本从右侧溢出，我尝试设置 padding-right 来尝试解决该问题，但仍然没有运气。我该如何解决这个问题？
这是我的 html、css 文件。
.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/testing.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css' />
<style type="text/css">
/* Importing Nomralized CSS */
@import url('css/normalize/normalize.css');
</style>
</head>
<body>
<div id="container">
<div class="header"></div>
<div class="content-main-top" id="dpb">
<p class="para">
Our new website is currently under<br/> development. It won't take long, please
</p>
<span id="clr" class="size" style="margin-top: 60px;"><h1 style="margin-top: 4px; margin-bottom: 3px;">sit tight!</h1></span>
<p class="para" style="margin-bottom: 10px; color: #808285; margin-top: 30px; font-weight:">
Fill in your email address and we<br/>
will let you know when we launch.
</p>
<input type="email" class="bubble_email"><input type="submit" name="sub" value="Notify me!" class="button">
</div>
<div class="chairs" id="dpb"></div>
<!-- end of container -->
</div>
<!-- Begin Footer -->
<div id="footer">
<!-- Start Container -->
<div id="container">
<!-- Footer Content -->
<div class="content-main-bottom">
<p id="clear_footer">
<span style="color: #808285; font-weight: bolder; line-height: 30px; font-size: 17px;">Get in touch</span><br/>
<!-- Tweet Pic -->
<a href="https://www.twitter.com/TitanHealthcare" target="_blank" class="tweet"></a>
<span class="para">Phone: </span><span style="color: #808285; font-weight: bolder">0845 130 8022</span><br/>
<a href="mailto:info@titanhealthcare.co.uk">info@titanhealthcare.co.uk</a>
</p>
<p style="font-weight: lighter; font-size: 13px; color: #939598">
© Titan Healthcare Limited 2014. All rights reserved.
</p>
</div>
<!-- End of content for footer -->
</div>
<!-- End of Container -->
</div>
<!-- End of footer -->
</body>
</html>
body {
font-family: 'Open Sans', sans-serif;
}
.para {
color: #7c7b7b;
font-size: 15px;
margin-bottom: 0px;
margin-top: 6px;
}
.para_b {
color: #808285;
}
/*Misc ID'S */
#clr {
color: #34a4b5;
}
/*Size class*/
.size {
font-size: 43px;
}
.button {
background-color:transparent;
outline: none;
border: 0px solid;
margin-left: 1px;
color: #34a4b5;
font-weight: bold;
}
a:link {
color: #34a4b5;
text-decoration: none;
}
#dpb {
display: inline-block;
float: left;
}
#clear_footer {
clear: both;
padding-top: 30px;
}
#container {
width: 980px;
margin: 0 auto;
}
#footer {
background-image: url('img/bottom_bar.jpg');
width: 100%;
height: 3px;
clear: both;
}
.content-main-bottom {
padding-bottom: 10%;
}
/* Images .classes */
.header {
background-image: url('img/titan_header.jpg');
background-repeat: no-repeat;
padding-top: 40px;
/*Size properties */
width: 980px;
height: 143px;
}
.bubble_email {
background-image: url('img/speech_bubble.jpg');
background-repeat: no-repeat;
/*Size properties*/
width: 244px;
height: 49px;
/*Misc Prop*/
background-repeat: none;
border: none;
outline: none;
padding-top: 0px;
margin-top: 6px;
padding: 0 6px;
}
.chairs {
background-image: url('img/titan_chairs.jpg');
background-repeat: no-repeat;
/*Size properties*/
width: 559px;
height: 400px;
margin-left: 50px;
margin-top: 40px;
}
.tweet {
background-image: url('img/tweet_button.jpg');
background-repeat: no-repeat;
/*Size properties*/
width: 368px;
height: 72px;
float: right;
}
谢谢
最佳答案
好的，这里的问题是您需要了解当您添加 padding-right:20; 时。并且宽度设置为 244px 然后您的输入字段变为 264px 宽，右侧填充为 20px，而不是 244px，右侧填充为 20px，正如您所假设的。因此，要解决您的问题，您需要添加一个正确的填充，例如10px 并使输入的宽度为 234px。
基本上只要您的输入宽度 + padding-left + padding-right 等于背景图像的宽度，您就会获得所需的效果。
解决方案(假设您的图像宽度为 250 像素):
.bubble_email {
background-image: url('img/speech_bubble.jpg');
background-repeat: no-repeat;
height: 49px;
background-repeat: none;
border: none;
outline: none;
margin-top: 6px;
width: 238px;
padding: 0 6px;
}
注意宽度为 238 + 左边距为 6，右边距为 6 = 250px。
希望这可以帮助。
关于html - 从输入溢出的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21726653/