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

【问题标题】：Align right input form in wordpress right sidebar在wordpress右侧边栏中对齐右输入表单
【发布时间】：2018-09-03 12:37:03
【问题描述】：

我有一个带有表单代码的 MailChimp for WordPress 插件

<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 以使其正常工作吗？

【问题讨论】：

给输入框显示块也许可以工作
能给个网址吗？
@Momin 这是一个例子biketoeverything.com/2018/01/01/…

标签： html css wordpress mailchimp

【解决方案1】：

你可以试试这个代码：

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

【讨论】：

感谢代码！解决方案就是width: 100%！由于某种原因，我的输入表单默认情况下没有填写整个空间。我认为我使用的 Wordpress 主题可能存在一些奇怪的问题。

【解决方案2】：

粘贴这个

   #my-input {

margin-left: 320px !important;

width: 50%; }

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

【讨论】：

这似乎迫使左边距更大以将其推过。当我输入margin-left: 22px（不需要!important）时它确实有效，但它似乎有点hacky。我发现我的问题似乎与宽度有关。

【解决方案3】：

在我的具体情况下，解决方案是

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

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

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

【讨论】：

【解决方案4】：

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

我不推荐的另一种方式是使用!important。你可以在css中添加margin-right:0px !important;。

【讨论】：