HTML5 中的 CSS 占位符问题

Question

这是我试过的代码:

HTML5:

<section class="featured">
    <p><img src="img/Defense.png" />ABOUVESTIBULUM ANTE IPSUM PRIMIS IN FAUCIBUS ORCILUCTUS</p>
    <form>
        <input type="text" placeholder="SUBSCRIBE TO OUR NEWSLETTER"/>
    </form>
</section>

CSS:

.featured { 
    background-color: darkgray;
    color:#fff; 
    padding:10px;
    display: flex;  
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}
input[type=text] {
    border-radius:0px;
    padding: 14px 86px 14px 18px;
    margin-left: 164px;
    margin-top: 8px;
}
form {
    float:right;
    margin:0;   
}

我的页面如下所示:http://postimg.org/image/6vlweo5sz/5d213f6c/

请问为什么占位符内容显示不正确？

这种做法是否正确？

Answer 1

将您的 CSS 输入属性更改为:

input[type=text] {
    border-radius:0px;
    padding: 14px 18px 14px 18px;
    margin-left: 164px;
    margin-top: 8px;
    width:240px;
}

你的 padding right 根本没有意义，你需要给输入元素一个宽度。或者，如果您不希望它那么宽，请添加较小的字体大小，例如 font-size:10px;

我已将机器人选项添加到 fiddle here