Question

我需要你的帮助，

我似乎无法将我的按钮放在DIV内的文本框右侧。下面是问题的捕获，我已经提供了预期最终结果的捕获：

以下是预期结果：

这是HTML标记＆amp;有问题的CSS：

<!DOCTYPE html>

<html>

<head>

<style type="text/css">
#recent {
    width: 175px;
    border: 1px solid red;
    list-style-type: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: none;
}

.search_field {
    display: inline-block;
    border: 1px solid red;
    width: 175px;
}

.search_field input {
    border: none;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

#btn_arrow {
    border: none;
    width: 15px;
}
</style>


</head>

<body>

<div class="search_field">
<input id="fileno" type="text">
<input type="button" value="&#9660;" id="btn_arrow">
</div>
<input type="button" id="search" value="search">
<ul id="recent"></ul>

</body>

</html>

Answer 1

您可以使用position:absolute;

来实现这一目标

#btn_arrow
{
    position: absolute;
    top: 0;
    right: 0;
}

.search_field
{
    position: relative;
}

Jsfiddle

#btn_arrow {
  position: absolute;
  top: 0;
  right: 0;
}
.search_field {
  position: relative;
}

<!DOCTYPE html>

<html>

<head>

  <script type="text/javascript" src="jquery.min.js"></script>

  <style type="text/css">
    #recent {
      width: 175px;
      border: 1px solid red;
      list-style-type: none;
      padding: 0;
      margin: 0;
      cursor: pointer;
      display: none;
    }
    .search_field {
      display: inline-block;
      border: 1px solid red;
      width: 175px;
    }
    .search_field input {
      border: none;
      padding: 0;
      width: 100%;
      box-sizing: border-box;
    }
    #btn_arrow {
      border: none;
      width: 15px;
    }
  </style>


</head>

<body>

  <div class="search_field">
    <input id="fileno" type="text">
    <input type="button" value="&#9660;" id="btn_arrow">
  </div>
  <input type="button" id="search" value="search">
  <ul id="recent"></ul>

</body>

</html>

Answer 2

您只需将.search_field input的宽度减小到100％以下即可。 100％宽度将覆盖整个区域。

http://jsfiddle.net/gu02emyd/3/

添加此

.search_field input {
    border: none;
    padding: 0;
    width: 88%;
    box-sizing: border-box;
}

Answer 3

我会在width: calc(100% - 15px);

上使用float:left;和.search_field input

#recent {
  width: 175px;
  border: 1px solid red;
  list-style-type: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: none;
}
.search_field {
  display: inline-block;
  border: 1px solid red;
  width: 175px;
}
.search_field input {
  border: none;
  padding: 0;
  width: calc(100% - 15px); // using calc to do 100% minus the width of the button
  box-sizing: border-box;
  float: left; // floating left so button moves up
}
#btn_arrow {
  border: none;
  width: 15px;
}

<div class="search_field">
  <input id="fileno" type="text">
  <input type="button" value="&#9660;" id="btn_arrow">
</div>
<input type="button" id="search" value="search">
<ul id="recent"></ul>

尝试将箭头按钮放在DIV

3 个答案: