用css移动按钮

Question

如何使用css获取文本框旁边的按钮？

Html代码

  <div data-bind="text:name" class="my-name"></div>
  <div id="wrapper">
  <input class="my-input"/>                   
  </div>             
  <div data-bind="dxButton: { icon: 'user' }"></div>

css代码

.my-name{float:left;color:#fd9802;position: absolute}
.my-input{margin:0 auto 0 30%;display:block;}

Answer 1

像这样使用CSS，删除自动并设置右边距

.my-name{float:left;color:#fd9802;}
.my-input{margin:0 0 0 30%;display:block;}

Answer 2

你需要在相同级别的元素上设置 float （例如在包装器而不是输入上）和每个元素上（例如在按钮上）

.my-name {
  float: left;
  color: #fd9802;
}
#wrapper {
  margin: 0 auto 0 30%;
  float: left;
}
.my-button {
  float: left;
}

<div data-bind="text:name" class="my-name">Name</div>
<div id="wrapper">
  <input class="my-input" />
</div>
<div data-bind="dxButton: { icon: 'user' }" class="my-button">Button</div>

Answer 3

.my-name{float:left;color:#fd9802;position: absolute}
.my-input{margin:0 auto 0 30%;display:block;}
 #wrapper{display: inline-block;}

Answer 4

在前一项的选择器之后使用+

div#wrapper + div{
    /*css code*/
}