将左边距应用于 html 输入按钮的所有文本行

Question

我似乎无法将文本对齐第一行下方。请参阅页面链接右侧绿色大"发送"按钮上方的文本。我尝试过显示：左边距：15px 仅适用于文本的第一行，但其余部分的显示方式不同。

Answer 1

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

Answer 2

例如，我认为

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

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

你不必使用Bootsrap，而是像这样的网格系统。

希望对您有所帮助:)

Answer 3

这应该可以做到。

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

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

Answer 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>

Answer 5

我希望它能帮助其他人！

您可以使用显示：块;

JSFiddle 演示

要实现您需要的内容，请使用以下 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>