Html 在固定宽度的div中获取同一行上的按钮和字段

我有一张表格。表单包含一个div内的文本字段。按钮位于包含文本字段的div之后。默认情况下，该按钮显示在文本字段后的下一行。我希望按钮与文本字段位于同一行

最初，我将包含字段和按钮的div浮动到左侧，这样做有效。但是，当我在左栏div（包含页面左侧所有内容的div，包括前面提到的表单）中添加固定宽度时，按钮再次转到下一行

为什么会这样？我怎样才能使按钮回到与字段相同的行上

这是我的表格：

<div class="topic_form" style="display: block; ">
  <form accept-charset="UTF-8" action="/videos/507/topic_update" class="edit_video" data-remote="true" id="edit_video_507" method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="✓">
    <input name="_method" type="hidden" value="put">
    <input name="authenticity_token" type="hidden" value="0KkgG3U+Kck7SqZTTJ12Td7pLjEN9GEvKEwfRymqN7M=">
  </div>
  <div class="field">
<input class="topic_field ui-autocomplete-input" id="video_topic_names" name="video[topic_names]" size="30" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
  </div>
  <input id="topic_submit" name="commit" type="submit" value="Add Topic">
  </form>
</div>

---

我将

div.field

和

input#topic_submit

浮动到左侧，但在将固定宽度添加到我的左列div后，这将不再起作用。

这是工作代码

<div class="topic_form" style="display: block; ">
  <form accept-charset="UTF-8" action="/videos/507/topic_update" class="edit_video" data-remote="true" id="edit_video_507" method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="✓">
    <input name="_method" type="hidden" value="put">
    <input name="authenticity_token" type="hidden" value="0KkgG3U+Kck7SqZTTJ12Td7pLjEN9GEvKEwfRymqN7M=">
  </div>
  <div class="field" style="width:200px;float:left;">
<input class="topic_field ui-autocomplete-input" id="video_topic_names" name="video[topic_names]" size="30" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
  </div>
  <input id="topic_submit" name="commit" type="submit" value="Add Topic">
  </form>
</div>

如果不添加div的宽度，它将是100%。因此，在这之后添加的任何内容都将出现在第二行。您必须设置div的宽度以使其正常工作

---

希望这有帮助

这是工作代码

<div class="topic_form" style="display: block; ">
  <form accept-charset="UTF-8" action="/videos/507/topic_update" class="edit_video" data-remote="true" id="edit_video_507" method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="✓">
    <input name="_method" type="hidden" value="put">
    <input name="authenticity_token" type="hidden" value="0KkgG3U+Kck7SqZTTJ12Td7pLjEN9GEvKEwfRymqN7M=">
  </div>
  <div class="field" style="width:200px;float:left;">
<input class="topic_field ui-autocomplete-input" id="video_topic_names" name="video[topic_names]" size="30" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
  </div>
  <input id="topic_submit" name="commit" type="submit" value="Add Topic">
  </form>
</div>

如果不添加div的宽度，它将是100%。因此，在这之后添加的任何内容都将出现在第二行。您必须设置div的宽度以使其正常工作

---

希望这有帮助

它们出现在单独的行中，因为包装文本字段的DIV是块元素。如果将其更改为内联元素，则它们应显示在同一行上

.field { display: inline; }

---

它们显示在单独的行上，因为包装文本字段的DIV是块元素。如果将其更改为内联元素，则它们应显示在同一行上

.field { display: inline; }

---

你能把你的代码用在上面吗只是一个提示：你不应该把你的“隐藏”字段用DIV标签包装。你能把你的代码用在上面吗只是一个提示：你不应该把你的“隐藏”字段用DIV标签包装。