在固定宽度的 div 中将按钮和字段放在同一行

发布于 2024-11-07 14:11:47 字数 1210 浏览 0 评论 0原文

我有一个表格。该表单在 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 添加固定宽度后，这不再起作用。

原文

I have a form. The form contains a text field inside of a div. The button follows the div that contains the text field. By default, the button appears on the next line after the text field. I want to get the button on the same line as the text field.

Initially I floated the div containing the field and the button both to the left, and this worked. However, when I added a fixed width to my left column div (a div that contains everything on the left side of my page, including the aforementioned form) the button went to the next line again.

Why is this? How can I get the button back on the same line as the field?

Here's my form:

<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>

I float div.field and input#topic_submit to the left, but this no longer works after adding a fixed width to my left column div.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情痴 2024-11-14 14:11:47

这是工作代码...

<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>

我在 .field 中添加了以下行

style="width:200px;float:left;"

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

希望这有帮助！

Here is the working code...

<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>

I have added the following line in .field

style="width:200px;float:left;"

If you doesn't add the width of the div it would be 100%.so anything added after that comes in second line.You have to set the width of the div to make it work...

Hope this helps!!!

回复收藏 0 原文

青丝拂面 2024-11-14 14:11:47

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

.field { display: inline; }

They are appearing on separate lines because the DIV wrapping your text field is a block element. If you change it to an inline element they should appear on the same line.