Question

enter image description here

我遇到的问题是我试图阻止文本从右边溢出，我尝试设置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">
                        &copy; Titan Healthcare Limited 2014. All rights reserved.
                    </p>
                </div>
                <!-- End of content for footer -->
            </div>
            <!-- End of Container -->
        </div>
        <!-- End of footer -->
    </body>
</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>  </div>  <div id="footer">  <div id="container">  <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/>  <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>  </div>  </div>  </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;
}

谢谢

Answer 1

好的，这里的问题是你需要了解当你添加 padding-right：20; 并且宽度设置为244px时，你的输入字段变为264px宽，右边填充20px，而不是244px，右侧填充为20px，如您所愿。因此，要解决您的问题，您需要添加一个正确的填充，例如10px并使输入的宽度为234px。

基本上只要您的输入宽度+填充左侧+填充右侧等于背景图像的宽度，您就可以获得所需的效果。

解决方案（假设您的图像宽度为250px）：

.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。

希望这有帮助。

Answer 2

 .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;
        }

您在<{1}}

中宽度为240或更低

OR

在.bubble_email

中添加padding-right: 15px;或更多内容

OR

拉伸背景图片，如

.bubble_email

Answer 3

将sppech bubble图像放在一个类中，如下所示：

.speechBubbleImage {
background-image: url('img/speech_bubble.jpg');
}

然后将其余的放在另一个类中，并改变宽度，如下所示：

 .innerSpeechBubble
    {
        background-repeat: no-repeat; /*Size properties*/
        width: 200px; /* This is what you change */ 
        height: 49px; /*Misc Prop*/

        background-repeat: none;  /* This is redundant and I recommend don't use this */

        border: none;
        outline: none;
        padding-top: 0px;
        margin-top: 6px;
        padding: 0 6px;
    }

没有img / speech_bubble.img图片，很难告诉你要放的宽度。

现在在HTML中使用它，就像这样

<div class='.speechBubbleImage">
<input type="email" class="innerSpeechBubble">
</div>

<input type="submit" name="sub" value="Notify me!" class="button">

这应该有效。让我知道你得到了什么。如果可能的话，给出图像，这样我就可以得到准确的宽度。

Answer 4

尝试使用可能解决此问题的溢出隐藏。

文本溢出来自输入

4 个答案: