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

Answer 2

您可以尝试使用size属性：

<input type="text" placeholder="SUBSCRIBE TO OUR NEWSLETTER" size="45"/>

Answer 3

输入框中有太多填充。

padding: 14px 86px 14px 18px;

订单为top - right - bottom - left。您可以调整第二个和第四个值。

如果您需要padding，请增加width。

在其他类似情况下可能有用的另一件事是：

input[placeholder] { 
    text-overflow: ellipsis; 
}

因为如果文本比你的文字长，它会指明行为。

HTML5中的CSS占位符问题

3 个答案: