将 margin-left 应用于 html 输入按钮的所有文本行答案

【问题标题】：Apply margin-left to all text lines of an html input button将 margin-left 应用于 html 输入按钮的所有文本行
【发布时间】：2018-09-30 23:29:54
【问题描述】：

我似乎无法将第一行下方的文本对齐。请参阅页面右侧link 的绿色“发送”大按钮上方的文字。我试过 display: margin-left:15px 仅适用于第一行文本，但其余显示不同。

【问题讨论】：

首先，请阅读How to Ask。相关代码属于您的问题，而不仅仅是在外部网站上。

标签： css input margin-left

【解决方案1】：

margin-left: 15px; 在您发布的网站上非常适合我.. 只需将要移动的内容包装在 div 中，例如：margin-div 并给 div margin-left: 15px;

【讨论】：

【解决方案2】：

例如，我认为您需要使用像引导程序这样的网格。并将您的输入（复选框）与您的文本分开。引导示例：

<div class="row">
    <div class="col-xs-2">your checkbox</div>
    <div class="col-xs-10">Your text</div>
</div>

您不必使用 Bootsrap，而是使用类似的网格系统。

希望对你有帮助:)

【讨论】：

【解决方案3】：

应该这样做。

.control-group.checkbox {
    padding-left: 20px;
}

.control-group.checkbox > input {
    margin-left: -23px;
}

这会将整个.control-group 向右移动，但会为input 元素还原它。

【讨论】：

【解决方案4】：

如果您想应用对齐方式，您应该将您的文本括在 <span></span> 或 <p></p> 中并给出 style="text-align:right;"。

另一方面，如果你说你想要缩进的文本（即不是复选框下方的文本）然后在那里创建一个表格

           <table>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>
                        <p>I agree to the terms of the privacy policy of APIS Informationstechnologien GmbH to have my data stored and processed for the purposes of initiating business and improving customer service. My data will not be provided to third parties. At any time, I can disagree with APIS Informationstechnologien GmbH using the data.</p>
                    </td>
                </tr>
            </table>

【讨论】：

【解决方案5】：

我希望它会帮助别人！

你可以使用 display: block;

JSFiddle demo

使用下面的 css 代码来实现您所需要的就足够了 - 将此 css 类应用于复选框或单选按钮旁边的内容 - 但不适用于复选框或单选输入标签。

.blockText {
  display: block;
  margin-left: 30px;
  margin-right: 40px;
}

如果您还希望单选按钮/复选框垂直居中，您也可以使用这些类。

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

HTML 示例如下：

<div class="parent">
<input class="child" type="checkbox" name="abc">
<span class="blockText">1. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam necessitatibus
            dignissimos saepe a molestiae, error cupiditate. Dolorem voluptates quae veniam vel ad iusto accusantium atque
            repellat? Qui omnis quia itaque!
 </span>
 </div>

 <br>

 <div class="parent">
 <input class="child" type="checkbox" name="abc2">
<span class="blockText">2. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam necessitatibus
            dignissimos saepe a molestiae, error cupiditate. Dolorem voluptates quae veniam vel ad iusto accusantium atque
            repellat? Qui omnis quia itaque!
 </span>
 </div>

【讨论】：