Question

我希望我的文本框从一行开始。我该怎么办？这是我的代码。

<div id="middle">
   <div id="left">
   </div >
   <div id="m">
        Name: <input type="text" name="y1" id="Name1"> <label style="display: none " id="Name" name="y2" >A </label><br />
        Family: <input type="text" name="y1" id="Family1"> <label  style="display: none " id="Family" name="y2" >B </label><br />
        Phone: <input type="text" name="y1" id="Phone1"><label style="display: none " id="Phone" name="y2" >C </label><br />

        <button  onclick="myFunction()">save</button>
        <button  onclick="myFunction1()">refresh</button>
   <div>

结果是：

但是我希望它显示为不使用空格：

Answer 1

label{
   width:50px;
   display:inline-block
}

<div id="middle">
    <div id="left">
    </div >
    <div id="m">
       <label>Name:</label> <input type="text" name="y1" id="Name1"> <label style="display: none " id="Name" name="y2" >A </label><br />
    <label>Family:</label> <input type="text" name="y1" id="Family1"> <label  style="display: none " id="Family" name="y2" >B </label><br />
    <label>Phone:</label> <input type="text" name="y1" id="Phone1"><label style="display: none " id="Phone" name="y2" >C </label><br />




    <button  onclick="myFunction()">save</button>
    <button  onclick="myFunction1()">refresh</button>

添加标签即可解决！

Answer 2

您可以在代码中实现很多改进。我想帮助您解决问题并提高您的编码标准。

首先解决有问题的问题。首先，您需要将标签文本包装在一个元素中，这将使您可以对它们应用宽度，以便它们很好地对齐，<label>元素将是最合适的。

像这样：

HTML

<label>Name:</label> <input type="text" name="y1" id="Name1"> <label style="display: none " id="Name" name="y2" >A </label><br />
<label>Family:</label> <input type="text" name="y1" id="Family1"> <label  style="display: none " id="Family" name="y2" >B </label><br />
<label>Phone:</label> <input type="text" name="y1" id="Phone1"><label style="display: none " id="Phone" name="y2" >C </label><br />

CSS

label {
    display: inline-block; // a label is display: inline; by default so needs to be set to display: inline-block; so it takes a new width
    width: 70px;
}

这将解决问题。

为使您的代码更进一步，我有一些建议。

尝试并减少使用ID，这是一种很好的做法，对所有样式使用类，并且仅在需要JS DOM操作时才使用ID。
<label>元素一个for属性，该属性将其链接到输入，这意味着当您单击标签时它将选择输入，这是更好的用户体验。
我建议使用BEM类命名约定，以确保您具有清晰易懂的CSS类名称。 BEM
在您的<input>元素中，您具有相同的名称。从语义上讲这是可以的，但只有在使用type="radio"时，对于所有其他输入类型，它们每个都应具有唯一的名称。
除非绝对必要，否则请尝试避免内联style="..."，将CSS保留在CSS文件中会更清洁。

如果我们应用所有这些，您将得到如下代码：

.inputs__row {
  margin-bottom: 10px;
}

.inputs__label {
  display: inline-block;
  width: 70px;
}

<div class="inputs">
    <div class="inputs__row">
        <label class="inputs__label" for="name">Name:</label>
        <input type="text" class="inputs__input" name="name" id="name" />
    </div>
    <div class="inputs__row">
        <label class="inputs__label" for="family">Family:</label>
        <input type="text" class="inputs__input" name="family" id="family" />
    </div>
    <div class="inputs__row">
        <label class="inputs__label" for="phone">Phone:</label>
        <input type="text" class="inputs__input" name="phone" id="phone" />
    </div>
    <div class="inputs__row">
        <button  onclick="myFunction()">save</button>
        <button  onclick="myFunction1()">refresh</button>
    </div>
</div>

希望这会有所帮助。

我如何防止以讨厌的方式开始输入

2 个答案: