gpt4 book ai didi

html - 防止文本 CSS 出现不规则间隙

转载 作者:太空宇宙 更新时间:2023-11-04 01:09:48 25 4
gpt4 key购买 nike

我想防止我的输入和文本之间出现不规则的间隙。我应该如何使用 CSS 属性执行此操作?

例如,我的输入将被放置在整个红线上: enter image description here
我的 HTML:

<body>
<div>
<p class ="LabelInput">Programme/CP/Ville
<input type="text" id="cp" name="cp"
placeholder="" />
</p>
</div>

<div class = "Typologie">
<p class ="LabelInput">Typologie
<input type="checkbox" id="Studio" name="Studio" checked />
<label for="Studio">Studio</label>

<input type="checkbox" id="T2" name="T2" checked />
<label for="T2">T2</label>

<input type="checkbox" id="T3" name="T3" checked />
<label for="T3">T3</label>

<input type="checkbox" id="T4" name="T4" checked />
<label for="T4">T4</label>

<input type="checkbox" id="T5P" name="T5P" checked />
<label for="T5P">T5P</label>
</p>
</div>

<div class = "Type">
<p class ="LabelInput">Type
<input type="checkbox" id="Appartement" name="Appartement" checked />
<label for="Appartement">Appartement</label>

<input type="checkbox" id="Maison" name="Maison" checked />
<label for="Maison">Maison</label>

<input type="checkbox" id="Commerce" name="Commerce" checked />
<label for="Commerce">Commerce</label>

<input type="checkbox" id="Parking" name="Parking" checked />
<label for="Parking">Parking</label>
</p>
</div>

<div class = "Budget">
<p class ="LabelInput">Budget
<div id="slider-range"></div>
</p>
</div>

<div class = "Livraison">
<p class ="LabelInput">Livraison
<input type="text" id="cp" name="cp"
placeholder="" />
</p>
</div>

<div class = "Annexes">
<p class ="LabelInput">Annexes
<input type="text" id="cp" name="cp"
placeholder="" />
</p>
</div>

我确定这是您可以做的事情,但我不记得或找不到该属性。

最佳答案

您需要对 HTML 进行一些调整以获得最佳效果。由于 p 不允许包含 block 级元素,因此您不能将 div 放入其中,如预算部分所示。

形成 w3 站点:

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

相反,在标签和内容周围添加两个 div 包装器以获得干净的解决方案:

.LabelInput {
width: 30%;
display: inline-block;
}

.LabelContent {
width: 69%;
display: inline-block;
}
<div class = "Type">
<div class="LabelInput">Type</div>
<div class="LabelContent">
<input type="checkbox" id="Appartement" name="Appartement" checked />
<label for="Appartement">Appartement</label>

<input type="checkbox" id="Maison" name="Maison" checked />
<label for="Maison">Maison</label>

<input type="checkbox" id="Commerce" name="Commerce" checked />
<label for="Commerce">Commerce</label>

<input type="checkbox" id="Parking" name="Parking" checked />
<label for="Parking">Parking</label>
</div>
</div>

如果您不想更改您的 html,请在您的标签周围添加一个包装元素,如 span 并在其上设置 min-width。这是一个简单但肮脏的解决方案。

<div class="LabelInput"><span class="myLabel">Type</span></div>

.myLabel {
min-width: 200px //adjust as needed to size of biggest label
display: inline-block;
}

关于html - 防止文本 CSS 出现不规则间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51424215/

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