Question

我想创建一个输入文本字段，其中我想要左侧的文本字段和输入右前方的按钮，并附加输入文本字段。考虑下面的HTML代码段......

＆＃13;

<div class="textbox-feild">
   <input type="text" class="textfield" name="Email" placeholder="Email *" title="Email * is mandatory and it should be a valid email address">
</div>
 <div class="button-field">
   <input type="button" class="buttonfield" value="Sign up now">
</div>

＆＃13;

Answer 1

使用display:flex到warp div：

＆＃13;

    .warp{
    display:flex;
    }

＆＃13;

<div class="warp">
    <div class="textbox-feild">
       <input type="text" class="textfield" name="Email" placeholder="Email *" title="Email * is mandatory and it should be a valid email address">
    </div>
     <div class="button-field">
       <input type="button" class="buttonfield" value="Sign up now">
    </div>
 </div>

＆＃13;

您可以使用display: inline-block;执行此操作

＆＃13;

    .textbox-feild,.button-field{
    display: inline-block;
    }

＆＃13;

    <div class="textbox-feild">
       <input type="text" class="textfield" name="Email" placeholder="Email *" title="Email * is mandatory and it should be a valid email address">
    </div>
     <div class="button-field">
       <input type="button" class="buttonfield" value="Sign up now">
    </div>

＆＃13;

Answer 2

制作div inline-block;

.textbox-feild, .button-field {
    display: inline-block;
}

<style>
body {
  font-size: 0;
}
.textbox-feild, .button-field {
    display: inline-block;
    
}
input {
   font-size: 14px;
}
</style>
<div class="textbox-feild">
   <input type="text" class="textfield" name="Email" placeholder="Email *" title="Email * is mandatory and it should be a valid email address">
</div>
 <div class="button-field">
   <input type="button" class="buttonfield" value="Sign up now">
</div>

修改如果您不想在输入和按钮之间留出空格

，请使用这些样式
body { font-size: 0; } .textbox-feild, .button-field { display: inline-block; } input { font-size: 14px; }

Answer 3

将display: inline-block添加到div

.textbox-feild,
.button-field {
  display: inline-block;
}

<div class="textbox-feild">
  <input type="text" class="textfield" name="Email" placeholder="Email *" title="Email * is mandatory and it should be a valid email address">
</div>
<div class="button-field">
  <input type="button" class="buttonfield" value="Sign up now">
</div>

Answer 4

尝试：

＆＃13;

(Com ports,Reno,279)
(Exer & Fit,clark,2000)
(Wat ports,colum,500)
(Team Sports,Petersburg,421)
(Recreation,charleston,1974)
(Exer & Fit,long beach,300)

＆＃13;

.contain {
  display: flex;
  flex-direction: row;
}

＆＃13;

或：

将相同的类应用于两者并使用<div class="contain"> <div class="textbox-feild"> <input type="text" class="textfield" name="Email" placeholder="Email *" title="Email * is mandatory and it should be a valid email address"> </div> <div class="button-field"> <input type="button" class="buttonfield" value="Sign up now"> </div> </div>进行样式设置，如下所示：

inline-block

Answer 5

您可以使用不同的方法。

查看小提琴：

display: inline-block';： - https://jsfiddle.net/vhxoqk8p/

float: left;： - https://jsfiddle.net/eg30js52/

display: inline-flex;： - https://jsfiddle.net/rpcesufb/

Answer 6

以下是我只能使用float: left;轻松完成的工作：
（我还纠正了错误问题，如feild）

＆＃13;

.textbox-field,
.button-field {
  float: left;           /* All-in-one: display inline and avoid the gap between them */
}

＆＃13;

<div class="textbox-field">
  <input type="text" class="textfield" name="Email" placeholder="Email *" title="Email * is mandatory and it should be a valid email address">
</div>
<div class="button-field">
  <input type="button" class="buttonfield" value="Sign up now">
</div>

＆＃13;

希望它有所帮助。

如何使用浮动右键进行文本输入

6 个答案: