Question

我有以下内容： https://codepen.io/anon/pen/KXYLrq

<header>
   <input type="text" id="textfield" placeholder="Get it done!" autofocus>
   <button id="add"><i class="fa fa-plus" aria-hidden="true"></i></button>
</header>

css太长，无法列出。我想专注于@media query。由于屏幕尺寸较大，我需要限制输入条的宽度。如果我设置了最大宽度或固定宽度，按钮将随屏幕尺寸一起移动并不断向右移动。

如何将按钮固定在某个屏幕尺寸的某个位置？（在codepen中，如果你取出媒体查询它工作得很好，大概是因为我将宽度设置为100％）

Answer 1

在媒体查询

中也添加此项

header button{
    right: auto;
    left: 695px
}

它可以帮助您将按钮与文本框对齐。

Answer 2

我在您的输入和按钮上放置了一个Container，假设您稍后在标题中有其他元素。

然后我将该部分设置为display: inline-block，使其获取内容的宽度，并使其成为子绝对元素的position: relative。因此，这些元素将该部分作为起点而不是标题。

https://codepen.io/anon/pen/jGRooL

Answer 3

只需将输入和按钮包装在一个父div中，然后在其中设置相对位置并在其中添加宽度。

＆＃13;

header {
  background: #25b99a;
  border-radius: 0 0 10px 10px;
  box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
  box-sizing: border-box;
  height: 80px;
  padding: 15px 25px 0 25px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 5;
}
header input {
  background: rgba(255, 255, 245, 0.2);
  border-radius: 5px 25px 25px 5px;
  border: 0;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 1);
  float: left;
  font-size: 15px;
  height: 50px;
  padding-right: 65px;
  outline: none;
  text-indent: 15px;
  width: 100%;
}
.search-box {
  position: relative;
  width:100%;
  max-width: 700px;
}
.search-box button {
  background-color: white;
  border-radius: 25px;
  border: 0;
  cursor: pointer;
  height: 50px;
  outline: none;
  position: absolute;
  right: 0;
  width: 50px;
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .search-box {
   max-width: none;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<header>
  <div class="search-box">
    <input type="text" id="textfield" placeholder="Get it done!" autofocus>
    <button id="add"><i class="fa fa-plus" aria-hidden="true"></i></button>
  </div>
</header>

＆＃13;

更新了Codepen pgrep(1)

保持div中的按钮与父div一起定位

3 个答案: