Question

我想防止输入和文本之间出现不规则的间隙。我该如何使用CSS属性？

例如，我的输入将被放置在该红线上：
我的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>

我确定这是您可以做的，但我不记得或找不到该物业。

Answer 1

您需要对HTML进行一些调整以获得最佳效果。由于p不允许包含块级元素，因此您不能像在“预算”部分中看到的那样放入div。

形成w3网站：

P元素代表一个段落。它不能包含块级元素（包括P本身）。

相反，在标签和内容周围添加两个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之类的包装元素，并在其上设置最小宽度。这是一个简单而又肮脏的解决方案。

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

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

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

1 个答案: