Question

我面临一个奇怪的问题。我在jsfiddle中准备了一个html页面，并在下面的方法中将相同的代码放在一个html中。

<html>
<style>
   jsfiddle css
</style>
   jsfiddle html code
</html>

我的jsfiddle：jsfiddle

将其设为test.html并以chrome开头。它在jsfiddle中显示完美，但在div中的第二个项目（＆＃34;注释：＆＃34;）之前显示了一个额外的选项卡（或者可能是一些空格）。我无法弄清楚原因。请帮忙。

Answer 1

我建议你稍微增强你的代码，以便按照你想要的方式显示字段。

<div class="dtl">
    <div>
         <b>&nbsp;Name:</b><span class="input"><input class="inputtxt" type="text"></span>
    </div>
    <div style="clear:both;"></div>
    <div>
         <b>&nbsp;Comments:</b><span class="input"><input class="inputtxt" type="text"></span>
    </div>
</div>

JSFiddle：JSFiddle

Answer 2

对CSS进行此更改，看看它是否解决了问题：

/* add these lines */
label {
  display:block;
  float: left;
}

span.input {
  display: block;
  float:right; /* ADD THIS LINE */
  overflow: hidden;
  padding-right: 1px;
  padding-left: 1px;
}

然后：

span > input.inputtxt{ /* CHANGE THIS AS WELL */ width: 290px; height:12px; border:none;}

为每个输入应用<label></label>。

<div class="dtl">
    <b><label>Name:</label></b>
    <span class="input"><input class="inputtxt" type="text" /></span>

    <b><label>Comments:</label></b>
    <span class="input"><input class="inputtxt" type="text" /></span>
</div>

JSFiddle似乎变得更好了。试试看。检查结果：JSFiddle Result

Answer 3

只需使用此小重置功能即可从浏览器中删除任何内置样式。这消除了你小提琴中的任何和所有内置间距。

* { margin: 0; padding: 0; box-sizing: border-box }

Answer 4

看起来jsfiddle默认为line-height:normal，本地html为line-height:1。

选项卡来自输入元素的不同高度，并且由于您是浮动的，因此第二个标签在第一个水平之后浮动，因为在需要新行之前仍有垂直空间。

添加span.input { line:height:1 }以查看一致的结果。

HTML CSS在元素之前放置一个未知选项卡

4 个答案: