2014-02-12 95 views
0

enter image description here文本溢出从输入

我有被我试图阻止文本从右侧溢出的问题,我已经尝试设置填充右,试图解决这一问题,但仍然没有运气。我怎样才能解决这个问题?

这是我的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:[email protected]">[email protected]</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> 

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

谢谢

+0

为它创建小提琴...没有问题,它适用于我的Chrome 32 .. – Sam1604

+0

仍然无法正常工作。它只是不断从图像中脱颖而出。 – user3274696

+0

使用*固定*'宽度'输入框 –

回答

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

你刚才下降宽度至240以下的.bubble_email

OR

.bubble_email

OR

弹力添加padding-right: 15px;以上的背景图像类似,

background-size:260px 50px; 
background-repeat:no-repeat; 
+0

您需要减小宽度,而不是增加!因为添加填充固有地增加了宽度 - 因此您需要从输入宽度中减去水平填充以保持其与图像大小相同。 – Sam

0

好了,所以这里的问题是,你要明白,当你添加填充右: 20;并且宽度设置为244px,那么您的输入字段将变为264px宽,正确填充20px,而不是244px,正如您所假设的那样填充20px。所以,要解决您的问题,您需要添加一个正确的填充10px,并使输入的宽度为234px。

基本上只要你的输入宽度+填充左边+填充右边等于你的背景图像的宽度,你就会得到想要的效果。

解(假定图像是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 + a的6上的左,右侧= 250像素填充和6。

希望这会有所帮助。

0

把sppech气泡图像中的一个类,像这样:

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

这应该工作。让我知道你得到了什么。如果可能的话给出图像,这样我就可以把确切的宽度。

+0

问题在于,他(或她)从输入的填充宽度(填充:0 6px;)减去6px,但实际上需要左侧减去12px - 6px,右侧减去6px。所以宽度应该是238px,而不是244px。无需分开课程,这只是一个简单的错误计算:) – Sam

-1

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