为什么占位符不显示它的最后一个元素？
为什么占位符不显示它的最后一个元素？
提问于 2022-06-08 16:13:01
有人能解释为什么占位符没有显示它的最后一个元素吗？
而不是“搜索Google或键入URL”
它显示：“搜索谷歌或键入一个UR”。
我试着删除所有的css代码，但是没有帮助.
.google-search {
font-family: 'Arial';
padding-left: 12px;
padding-right: 250px;
padding-top: 6px;
padding-bottom: 6px;
border: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
border-radius: 20px;
}<input type="text" placeholder="Search Google or type a URL" class="google-search">
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-06-08 16:16:19
使用width而不是padding-right
<!DOCTYPE html>
<html>
<head>
<style>
.google-search{
font-family:'Arial';
padding-left:12px;
width: 250px;
padding-top:6px;
padding-bottom:6px;
border:none;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.4);
border-radius:20px;
}
</style>
</head>
<body>
<input type="text" placeholder="Search Google or type a URL" class="google-search">
</body>
</html>
Stack Overflow用户
发布于 2022-06-08 16:16:31
虽然这个领域看上去很宽，但这仅仅是由于右手边的250px of padding。
placeholder (以及您可能在字段中键入的任何文本或放入value属性)在内容宽度区域的边缘被切断。
Stack Overflow用户
发布于 2022-06-08 16:22:47
只需给出输入的宽度。这会解决你的问题。
<!DOCTYPE html>
<html>
<head>
<style>
.google-search{
font-family:'Arial';
padding-left:12px;
padding-right:250px;
padding-top:6px;
padding-bottom:6px;
border:none;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.4);
border-radius:20px;
width: 50%
}
</style>
</head>
<body>
<input type="text" placeholder="Search Google or type a URL" class="google-search">
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72548997
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号