gpt4 book ai didi

html - 如何防止复选框/单选按钮下的长文本标签换行?

转载 作者:搜寻专家 更新时间:2023-10-31 08:51:39 25 4
gpt4 key购买 nike

Sample Markup and CSS

.wrap {
width: 220px;
}

.indi-wrap {
padding-bottom: 10px;
}

.control-label {
display: inline;
font-weight: 300;
}

button.btn-link {
background: 0;
border: 0;
padding: 0;
margin: 0;
}
<div class="wrap">
<div class="indi-wrap">
<input type="checkbox" />
<label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</label>
<button type="button" class="btn btn-link">only</button>
</div>
<div class="indi-wrap">
<input type="checkbox" />
<label class="control-label">Xonsectetur adipiscing.</label>
<button type="button" class="btn btn-link">only</button>
</div>
<div class="indi-wrap">
<input type="checkbox" />
<label class="control-label">Sed do eiusmod tempor incididunt ut labore.</label>
<button type="button" class="btn btn-link">only</button>
</div>
</div>

注意:我知道我可以将复选框包裹在标签内来解决这个问题,但是从“indi-wrap”类开始,它会自动填充在父级“wrap”中,因此我无法在“indi-wrap”中编辑任何内容。

有什么方法可以将文本标签的第二行与第一行对齐吗?防止它在复选框下换行。

最佳答案

您可以使用 flexbox 来实现这一点。

.wrap {
width: 220px;
}

.indi-wrap {
padding-bottom: 10px;
display: flex;
align-items: flex-start;
}
.indi-wrap input { flex: 1; }
.indi-wrap label { flex: 7; }

.control-label {
display: inline;
font-weight: 300;
}

button.btn-link {
background: 0;
border: 0;
padding: 0;
margin: 0;
}
<div class="wrap">
<div class="indi-wrap">
<input type="checkbox" />
<label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</label>
<button type="button" class="btn btn-link">only</button>
</div>
<div class="indi-wrap">
<input type="checkbox" />
<label class="control-label">Xonsectetur adipiscing.</label>
<button type="button" class="btn btn-link">only</button>
</div>
<div class="indi-wrap">
<input type="checkbox" />
<label class="control-label">Sed do eiusmod tempor incididunt ut labore.</label>
<button type="button" class="btn btn-link">only</button>
</div>
</div>

关于html - 如何防止复选框/单选按钮下的长文本标签换行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42270265/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com