我尝试将文本对齐复选框旁边，但复选框看起来太小

Question

div {
display: inline-block;
position: relative;
}
#termAndCondtion {
position: absolute;
float: right;
}

<div>
<div><input type="checkbox" id="termAndCondtion" name="agree"></div>
<div>اقر ان الرغبات التي تقدمت بها هي الرغبات الصحيحة وتم التأكد منها والبيانات التي تقدمت بها هي البيانات الصحيحة</div>
</div>

就像它出现在图片中一样 在此处输入图像描述

Answer 1

你可以在这里使用flexbox并添加

display: flex;

在父.wrapper元素上

.wrapper{
display: flex;
}

<div class="wrapper">
<div><input type="checkbox" id="termAndCondtion" name="agree"></div>
<div>اقر ان الرغبات التي تقدمت بها هي الرغبات الصحيحة وتم التأكد منها والبيانات التي تقدمت بها هي البيانات الصحيحة</div>
</div>

Answer 2

您需要对阿拉伯语使用从右到左的CSS方向，并在其旁边显示复选框.
为了将它们都在同一行中，将div转换为span是可行的，但是文本使在您可能不想要的复选框下继续，所以在这种情况下， 使用弹性框模型更好。

您应该从w3Schools弹性框中了解更多信息

.arabic-text {
direction: rtl;
}
.d-flex {
display: flex;
}

<div class="arabic-text d-flex">
<div>
<input type="checkbox" id="termAndCondtion" name="agree">
</div>
<div>اقر ان الرغبات التي تقدمت بها هي الرغبات الصحيحة وتم التأكد منها والبيانات التي تقدمت بها هي البيانات الصحيحة</div>
</div>

Answer 3

最佳做法是将输入和标签元素一起使用。

<input type="checkbox" id="TC" name="agree">
<label for="agree"> ..your text.. </label>

这将自动将文本放在复选框旁边，因为它是一个内联元素

若要更改复选框的大小，可以使用高度和宽度属性。如果需要，还可以添加垂直对齐。

#TC {
height: 1.3rem;
width: 1.3rem;
vertical-align: middle;
}

<input type="checkbox" id="TC" name="agree">
<lable for="agree"> ..your text.. </lable>

Answer 4

.adjustment{
float: right
}
.text {
text-alight:right
}

<div class="parent">
<div class="adjustment"><input type="checkbox" id="termAndCondtion" name="agree"></div>
<div class="text">اقر ان الرغبات التي تقدمت بها هي الرغبات الصحيحة وتم التأكد منها والبيانات التي تقدمت بها هي البيانات الصحيحة</div>
</div>
</body>

Answer 5

div.outer {
display: flex;
flex-direction: row-reverse;
}

<div class="outer">
<input type="checkbox" id="termAndCondtion" name="agree">
<label for="termAndCondtion">اقر ان الرغبات التي تقدمت بها هي الرغبات الصحيحة وتم التأكد منها والبيانات التي تقدمت بها هي البيانات الصحيحة</label>
</div>

将复选框和句子放在同一行中

您不需要任何外部 CSS 即可实现此目的。您可以只使用<label>标签，这也增强了小屏幕用户的可访问性。此外，移动到下一行的文本是因为您将复选框包装在默认情况下样式为display: block;的<div>标记中。

将复选框放在右侧

您可以将这两个元素放在flexbox中，并为其flex-direction: row-reverse;，以使句子出现在复选框之前。

注意：您也可以使用 HTML 手动将复选框放在句子<div>之前，但最好仅使用 CSS 更改页面的外观，因为当语言为左右书写类型或任何其他用例时，或者资源加载遇到错误并且无法加载 CSS 文件时，您可能希望将复选框保留在左侧。

Answer 6

您希望该文本内容就在复选框旁边吗？ 如果是这样，请使用以下代码。我希望我有帮助。

div {
display:inline-block;
position:relative;

#termAndCondtion {
position:absolute;
float: right;
}
}

<div><input type="checkbox" id="termAndCondtion" name="agree">اقر ان الرغبات التي تقدمت بها هي الرغبات الصحيحة وتم التأكد منها والبيانات التي تقدمت بها هي البيانات الصحيحة</div>