Erste Taste und Feld in der gleichen Zeile in der eine Feste Breite div

Habe ich ein Formular. Das Formular enthält ein Textfeld innerhalb eines div. Die-Taste folgt die div mit dem text-Feld. Standardmäßig wird die Schaltfläche angezeigt, auf der nächsten Zeile nach dem text-Feld. Ich möchte den button in der gleichen Zeile wie das Textfeld.

Zunächst schwebte ich das div, das das Feld und die Schaltfläche sowohl auf der linken, und das hat funktioniert. Allerdings, wenn ich fügte hinzu, eine Feste Breite für meine linke Spalte-div-Element (ein div, das alles enthält auf der linken Seite von meiner Seite, einschließlich der oben genannten form) der Taster ging in die nächste Zeile wieder.

Warum ist das so? Wie bekomme ich den Knopf wieder auf der gleichen Zeile wie das Feld?

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

Ich float div.field und input#topic_submit auf der linken Seite, doch dieser funktioniert nicht mehr nach hinzufügen einer festen Breite zu meiner linken Spalte div.

können Sie fügen Sie Ihren code, mit ihm zu arbeiten..
Ich habe meine form
Nur eine Anmerkung: Sie sollten sich nicht wickeln Sie Ihre 'hidden' - Felder in einem DIV-tag.

InformationsquelleAutor user730569 | 2011-05-16

  1. 3

    Hier ist der funktionierende 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>

    Habe ich die folgende Zeile in .Feld

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

    Wenn Sie nicht fügen Sie die Breite des div-es wäre 100%.also nichts Hinzugefügt, danach kommt in zweiter Linie.Sie haben zu setzen Sie die Breite des div, um es Arbeit...

    Hoffe, das hilft!!!

    dies funktioniert nicht für mich :/
    Blick auf diese demo:jsfiddle.net/anish/ETfPD

    InformationsquelleAutor Anish

  2. 1

    Erscheinen Sie auf separaten Zeilen, weil das DIV-Element Verpackung Ihrer text-Feld ist ein block-element. Wenn Sie es ändern, um ein inline-element, sollten Sie in der gleichen Zeile angezeigt.

    .field { display: inline; }

    InformationsquelleAutor wdm

Schreibe einen Kommentar