在wordpress右侧边栏中对齐右输入表单

Question

我有一个适用于 WordPress 的 MailChimp 插件，其中包含表单代码

<p>
    <label>Get new posts delivered to your inbox!</label>
    <input type="email" id="my-input" name="EMAIL" align="right" placeholder="Your email address" required />
</p>

<p>
    <input type="submit" value="Subscribe" />
</p>

侧边栏看起来像这样：

除了我的输入表单外，边栏中的所有内容似乎都正确对齐。有一个右边距我不能去掉。

我可以把客户 CSS 像这样，但它并没有什么。

#my-input {
    text-align: right; /* This works */
    margin-right: 0px; /* This doesn't work */
}

有任何关于编辑 HTML 或自定义 CSS 以使其正常工作的提示吗？

Answer 1

如果你想为输入标签使用边距，你必须指定 width 并使用 display:block。看看这个 question 它可能对你有帮助。

我不推荐的另一种方式是使用 !important。您可以在 css.

中添加 margin-right:0px !important;

Answer 2

您可以试试这个代码：

#my-input {
    text-align: right; 
    margin-right: 0 !important;
    display: block;
    width: 100%;
}

Answer 3

粘贴这个

   #my-input {

margin-left: 320px !important;

width: 50%; }

你可以在这里查看https://www.w3schools.com/code/tryit.asp?filename=FPP4AWLPX1NP

Answer 4

在我的具体案例中，解决方案是

#my-input {
    width: 100%; /* Somehow width was not already 100% by default */
}

也许是我使用的 Customizr Wordpress 主题中的某些东西搞砸了。

感谢@BM RAFIQ 给我代码来尝试，如果宽度 100% 对你不起作用，请尝试他写的一些其他代码。

在wordpress右侧边栏中对齐右输入表单

Align right input form in wordpress right sidebar

html

css

wordpress

mailchimp