HTML5中的CSS占位符问题

这是我尝试过的代码：

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>

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

我的页面如下所示：

我可以知道占位符内容未正确显示的原因吗

---

此方法是否正确？

将CSS输入属性更改为：

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

您的

右键填充

毫无意义，您需要为输入元素指定一个宽度。或者，如果你不希望它那么宽，可以添加一个较小的字体，比如

font-size:10px

我已将bot选项添加到
中，您可以尝试使用
大小
属性：

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

输入框的填充空间过多

padding: 14px 86px 14px 18px;

顺序是
上-右-下-左
。可以调整第二个和第四个值

如果需要
填充
，请增加
宽度

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

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

因为它指定了文本比框长时的行为。
发布整个代码。占位符已在某处更改。它在铬合金中工作良好。在所有文件中搜索“订阅我们的网元”。调整窗口大小时，显示如下所示。这是不正确的，对吗？不，但这与页面的其他布局有关，请打开另一个问题并包含您的代码，您可以使用我的小提琴作为起点，然后将其分叉并粘贴到此处，以便我们可以看到它，我们可以帮助您（无论哪种方式，这都是一个简单的修复，唯一需要的是了解您的布局，就这样）我希望看起来像我发布的图像，只需要在占位符值的完整视图中进行更改。