2

我希望我的按钮位于文本输入中。像这样：

在此处输入图像描述

这是我的代码：

input {
        background: #8196aa;
        border: 0;
        border-radius: 10px;
        color: white;
        padding: 20px;

        &:focus {
            outline: none;
        }

        &::placeholder {
            color: white;
        }
    }

    button {
        background: #16bdae;
        border: 0;
        border-radius: 7px;
        color: white;
        padding: 15px;
    }
<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress">
  <button>LOGIN</button>
</div>

我希望有人对此有答案。（Stack Overflow 上的其他答案对我没有帮助）

4

7 回答 7

3 

* {
  box-sizing: border-box;
}

input {
  background: #8196aa;
  border: 0;
  border-radius: 10px;
  color: white;
  padding: 20px;
  width: 100%;
}

input:focus {
  outline: none;
}

input::placeholder {
  color: white;
}

button {
  background: #16bdae;
  border: 0;
  border-radius: 7px;
  color: white;
  padding: 15px;
  position: absolute;
  right: 5px;
  top: 5px;
}

.pt-site-footer__submit {
  position: relative;
  display: inline-block;
  width: 50%;
}
<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress" />
  <button>LOGIN</button>
</div>

于 2021-09-24T10:49:45.880 回答
2

我认为这就是你需要的

.pt-site-footer__submit{
  display: inline-block;
  position: relative;
  overflow: hidden;
}
input {
  background: #8196aa;
  border: 0;
  border-radius: 10px;
  color: white;
  padding: 20px;
  min-width: 320px;
}

button {
  position: absolute;
  background: #16bdae;
  border: 0;
  border-radius: 7px;
  color: white;
  padding: 15px;
  cursor:pointer;
  right: 5px;
  top: 50%;
  transform: translate(0, -50%);
}
<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress">
  <button>LOGIN</button>
</div>

于 2021-09-24T10:51:25.080 回答
1 
Please try to given css

button {
    background: #16bdae;
    border: 0;
    border-radius: 7px;
    color: white;
    padding: 15px;
    position: absolute;
    right: 10px;
    top: 5px;
}

.pt-site-footer__submit {
    width: auto;
    float: left;
    position: relative;
}
于 2021-09-24T10:47:08.727 回答
1 

.pt-site-footer__submit{
      position: relative;

}
input {
        background: #8196aa;
        border: 0;
        border-radius: 10px;
        color: white;
        padding: 20px;
        width: 94%;

        &:focus {
            outline: none;
        }

        &::placeholder {
            color: white;
        }
    }

  button {
    background: #16bdae;
    border: 0;
    position: absolute;
    border-radius: 7px;
    color: white;
    padding: 6px 15px;
    right: 0;
    top: 0;
    bottom: 0;
    height: 38px;
    margin: auto;
}
<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress">
  <button>LOGIN</button>
</div>

于 2021-09-24T11:09:59.237 回答
1

输入标签是自闭合的，你不能放孩子。也许您可以添加一个包装器元素，您应该将其设置为输入样式，并在您的输入中设置透明背景。例如：

<div class="pt-site-footer__submit">
   <div class="input-wrapper">
       <input type="email" placeholder="Your e-mailadress">
       <button>LOGIN</button>
   </div>
</div>

样式是这样的：

input {
    width: calc(100% - [BUTTON-WIDTH]);
    border: 0;
    color: white;
    background-color: transparent;

    &:focus {
        outline: none;
    }

    &::placeholder {
        color: white;
    }
}

button {
    width: [BUTTON-WIDTH];
    background: #16bdae;
    border: 0;
    border-radius: 7px;
    color: white;
    padding: 15px;
}

input-wrapper {
    background: #8196aa;
    border: 0;
    border-radius: 10px;
    padding: 20px;
}

如果您需要，我们还可以使用 flexbox 或 css 网格来绘制和居中该组件

于 2021-09-24T11:16:18.753 回答
1

严格来说，您不能将按钮放在输入中，因为输入元素没有这种意义上的内容。

您可以做的是绝对定位按钮并使用翻译将其带回来以覆盖输入以提供相同的视觉效果。

这是一个片段，但您必须考虑要提供多少填充以及将按钮带回多少，以免覆盖某些占位符。

input {
  background: #8196aa;
  border: 0;
  border-radius: 10px;
  color: white;
  padding: 20px;
  position: relative;
}

input:focus {
  outline: none;
}

input::placeholder {
  color: white;
}

button {
  background: #16bdae;
  border: 0;
  border-radius: 7px;
  color: white;
  padding: 15px;
  position: absolute;
  transform: translate(calc(-100% - 5px), 5px);
}
<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress">
  <button>LOGIN</button>
</div>

于 2021-09-24T11:24:52.403 回答
1

@Abin Thaha 提供了一个很好的答案。我只会对该答案中发布的css进行一项更改。

添加padding-right: 100px;到inputcss 以防止长文本在登录按钮下流动：

* {
  box-sizing: border-box;
}

input {
  background: #8196aa;
  border: 0;
  border-radius: 10px;
  color: white;
  padding: 20px;
  padding-right: 100px; /* <---------- Added right padding here to prevent text flowing under button */
  width: 100%;
}

input:focus {
  outline: none;
}

input::placeholder {
  color: white;
}

button {
  background: #16bdae;
  border: 0;
  border-radius: 7px;
  color: white;
  padding: 15px;
  position: absolute;
  right: 5px;
  top: 5px;
}

.pt-site-footer__submit {
  position: relative;
  display: inline-block;
  width: 50%;
}
<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress" />
  <button>LOGIN</button>
</div>

于 2021-09-24T12:53:38.660 回答