Question

请建议合适的修改以删除 input type =“text”与后续 div 元素之间的空格。如果我将 input type =“text”元素的宽度设置为180px，将以下 div 的宽度设置为20px; div 溢出并向下移动。我不想在子div上使用 margin-left：-... px 使其显示为内联（因为它在firefox中使用-8px而在chrome中采用-6px使它们成为出现内联）但我仍然希望这两个元素完全内联显示，它们之间没有任何空格，并且所有浏览器的父元素都是边缘到边缘。

请建议......

的CSS：

#parentDiv {
  display: block;
  width: 200px;
  height: 20px;
  background-color: rgb(200,200,200);
  border: dotted 2px;
  border-radius: 0px 0px 0px 0px;
}
#parentDiv input[type="text"] {
  display: inline-block;
  width: 175px;
  height: 90%;
  border: none;
  vertical-align: top;
}
#parentDiv div {
  background-color: #57c274;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  text-decoration: none;
  height: 100%;
  width: 20px;
  /*margin-left: -6px;*/
  text-align: center;
}

<div id=parentDiv>
  <input type="text">
  <div></div>
</div>

Answer 1

更改

<div id=parentDiv>
  <input type="text">
  <div></div>
</div>

到

<div id='parentDiv'>
  <input type='text' value='' /><div></div>
</div>

在HTML中，单个或多个空格或换行符将创建一个空格。由于在<div>之前有换行符，因此存在一个文本节点。

Answer 2

只需float你的元素

比应用这些样式，使其在所有现代浏览器中都很好用：

#parentDiv {
    width: 200px;                                               /* 200- */
    height: 20px;
    background-color: rgb(200,200,200);
    border: dotted 2px;
    border-radius: 0px 0px 0px 0px;
}
#parentDiv input[type="text"] {
    box-sizing:border-box;       /* Respect the designer :) */
    width: 180px;                                               /* 180= */
    height: 100%;                /* Yey! finally 100% */
    border: none;
    float:left;                  /* Go left */
}
#parentDiv div {
    background-color: #57c274;
    float:right;                 /* Go right */
    cursor: pointer;
    color: #ffffff;
    text-decoration: none;
    height: 100%;
    width: 20px;                                                /* 20 */
    text-align: center;
}

<强> jsBin demo

Answer 3

这是一个扩展PHPglue回答的片段

＆＃13;

#parentDiv {
  display: block;
  width: 200px;
  height: 20px;
  background-color: rgb(200,200,200);
  border: dotted 2px;
  border-radius: 0px 0px 0px 0px;
}
#parentDiv input[type="text"] {
  display: inline-block;
  width: 180px;
  height: 90%;
  border: none;
  vertical-align: top;
}
#parentDiv div {
  background-color: #57c274;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  text-decoration: none;
  height: 100%;
  width: 20px;
  /*margin-left: -6px;*/
  text-align: center;
}

＆＃13;

<div id=parentDiv>
  <input type="text"><div></div></div>

＆＃13;

<input type =“text”/>与其后续元素<div>之间有空格。有没有办法让它们在内联可见</div>

3 个答案: