Question

我已经完成了一些编码，我可以在php页面上进行自动完成。但不幸的是，当我在文本框中输入内容时，它确实显示了我需要的内容，但是当它显示时表格变得很奇怪：

我想（使用css自定义）浮动，如下所示：

有人可以帮我这个吗？我不是很擅长CSS，所以这里是代码：

#material-list {
  position: relative;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 190px;
}
#material-list li {
  padding: 10px;
  background: #FAFAFA;
  border-bottom: #F0F0F0 1px solid;
}
#material-list li:hover {
  background: #F0F0F0;
}
#search-box {
  padding: 10px;
  border: #F0F0F0 1px solid;
}

<table>
  <tr>
    <td bgcolor="#8eb4e3" class="td-data_1"><font size="2dp"><strong>Material Code</strong></font>
    </td>
    <td class="td-data_1">
      <div class="frmSearch">
        <input type="text" id="material_code" placeholder="Enter Material Name" style="font-size:13px; width: 215 " />
        <div id="suggesstion-box"></div>
      </div>
    </td>
  </tr>
</table>

Answer 1

在#suggestion-box absolute中设置position，因此它不会在页面流程中进行互动

＆＃13;

#material-list {
  position: relative;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 190px;
}
#material-list li {
  padding: 10px;
  background: #FAFAFA;
  border-bottom: #F0F0F0 1px solid;
}
#material-list li:hover {
  background: #F0F0F0;
}
#search-box {
  padding: 10px;
  border: #F0F0F0 1px solid;
}
#suggesstion-box {position:absolute;

＆＃13;

<table>
  <tr>
    <td bgcolor="#8eb4e3" class="td-data_1"><font size="2dp"><strong>Material Code</strong></font>
    </td>
    <td class="td-data_1">
      <div class="frmSearch">
        <input type="text" id="material_code" placeholder="Enter Material Name" style="font-size:13px; width: 215 " />
        <div id="suggesstion-box">whatever<br/>whatever </div>
      </div>
    </td>
  </tr>
</table>

＆＃13;

使<div> </div>浮动在表tr和td中

1 个答案: