Question

我需要你的帮助，

我的问题是我似乎无法让输入框正确排列在我的图标旁边。它似乎将自己包装到下一行并且还在父div边界之外打破了？

如何让图标在输入框的左侧正确排列。

以下是问题的捕获：

这是期望的结果：

以下是有问题的HTML和CSS标记：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
.field {
    border: 1px solid red;
    width: 200px;
}
#fileno {
    border: 0;
    width: 100%;
}
#icon_search {
    background: #FFF;
    border: 0;
}

</style>

</head>

<body>

<div class="field">
    <div id="icon_search" style="float: left;"><img alt="search" width="16" height="16" src="glass.png"/></div>
    <input id="fileno" type="text">
</div>

</body>

</html>

Answer 1

问题是width:100%有.field。场地和图标都没有空间。由于您已定义img和#fileno的宽度，因此您还可以定义184px的宽度（以像素为单位）：#icon_search [200px - 16px]。

而且，根据您提供的代码，float: left似乎没有必要，因此我将其删除并将.field img放在#fileno上。如果还有其他原因，它仍应使用div中定义的宽度。如果#fileno是必要的，请告诉我，我可以将其重新插入，但基本上是因为100%是<div class="field"> <img alt="search" width="16" height="16" src="glass.png"/> <input id="fileno" type="text"> </div>。

HTML：

.field {
    border: 1px solid red;
    width: 200px;
}
#fileno {
    width: 184px;
    border: 0;
}
.field img {
    float: left;
}

CSS：

inline-block

这是QEvent.Type。

Answer 2

你应该使用％，这样你就可以通过在这种情况下简单地更改父width来重复使用它.field

.field {
  border: 1px solid red;
  width: 200px;
  float: left;
}
#fileno {
  border: 0;
  width: 90%;
}
#icon_search {
  background: #FFF;
  height: 20px;
  width: 10%;
}
#icon_search img{
  width: 20px;
  height: 20px;
}

<div class="field">
  <div id="icon_search" style="float: left;">
    <img alt="search" width="16" height="16" src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.clker.com%2Fcliparts%2F0%2F1%2FS%2F1%2Fl%2FW%2Fsearch-icon-hi.png&f=1" />
  </div>
  <input id="fileno" type="text" placeholder="search">
</div>

在输入文本框旁边的左侧粘贴图标

2 个答案: