输入旁边的按钮 [英] Button next to input

问题描述

我需要在全角 input 旁边放置一个固定宽度的 button，这样它们就会是全角的.我该怎么做?

<输入占位符=示例"><按钮>></按钮>
<风格>div {高度:30px}div >* {高度:100%}输入{宽度:100%}按钮{宽度:30px}</风格>

小提琴

解决方案

Flexbox 可以做到这一点.

 div {高度:30px；显示:-webkit-box；显示:-webkit-flex；显示:-ms-flexbox;显示:弹性；宽度:80%；保证金:5em 自动；边框:1px 纯灰色；}输入 {-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;弹性:1;}按钮 {-webkit-box-flex: 0;-webkit-flex: 0 0 30px;-ms-flex: 0 0 30px;弹性:0 0 30px}

<输入占位符=示例"><按钮>></按钮>

绝对定位

div {高度:30px；位置:相对；边距顶部:5em；padding-right: 30px;/* 按钮宽度 */}div >* {高度:100%；box-sizing: 边框框；}输入 {宽度:100%}按钮 {宽度:30px；位置:绝对；顶部:0；右:0；}

<输入占位符=示例"><按钮>></按钮>

I need to place a fixed-width button next to an full-width input, so together they'll be full-width. How do I do this?

<div>
  <input placeholder="example">
  <button>></button>
</div>

<style>
    div {height: 30px}
    div > * {height: 100%}

    input {width: 100%}
    button {width: 30px}
</style>

Fiddle

解决方案

Flexbox can do that.

    div {
      height: 30px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
      width: 80%;
      margin: 5em auto;
      border:1px solid grey;
    }

    input {
      -webkit-box-flex:1;
      -webkit-flex:1;
          -ms-flex:1;
              flex:1;
    }
    
    button {
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 30px;
          -ms-flex: 0 0 30px;
              flex: 0 0 30px
    }

<div>
  <input placeholder="example">
  <button>></button>
</div>

Absolute Positioning

div {
  height: 30px;
  position: relative;
  margin-top:5em;
  padding-right: 30px;
  /* width of button */
}
div > * {
  height: 100%;
  box-sizing: border-box;
}
input {
  width: 100%
}
button {
  width: 30px;
  position: absolute;
  top: 0;
  right: 0;
}

<div>
  <input placeholder="example">
  <button>></button>
</div>

这篇关于输入旁边的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！