Machen Sie h4 Tag Zeilenumbruch am Anfang der neuen Zeile

Question

Ich habe eine für jede Schleife, die Eingabefelder zwischen h4 Tags, aber wenn ich die Webseite auf meinem Handy öffne ich sah, dass der Text hatte einen Zeilenumbruch, der Art von seltsam.

Ich möchte den Text anzeigen als 'Die [Texteingabe] Szenen wurden aus dem Film geschnitten.' in einer Weise, die leicht zu lesen ist. Dazu muss das Texteingabefeld die Höhe einer Textzeile beibehalten und überall dort, wo der Zeilenumbruch stattfindet, sollte es unterhalb von "The" beginnen. Ich habe nach vielen Lösungen gesucht und bis jetzt habe ich keine Lösung gefunden.

Ist das etwas, das mit etwas einfachem CSS behoben werden kann oder erfordert es auch, dass ich etwas JS mache?

<form action="" method="post" id="answers" class="card-title"> 
<h4>The </h4> 
<input class="form-control answer_input" autocomplete="off" id="answer_1" style="min-width:40px; width: 100px; max-width300pheight:30px; margin-left: 10px; margin-right: 10px;" autofocus="" type="text"> 
<h4> scenes were cut from the film. (horrify)</h4> 

Dies ist der aktuelle Code für den Screenshot oben zu sehen. Es hat einige CSS hinzugefügt, die es zu einer Flex-Zeile macht.

Dies ist die Klinge Code, um das Formular

<?php $i=0; $answers = explode('|', $question->correct_answer); ?> 
      <form action="" method="post" id="answers" class="card-title"> 
        <?php $sections = explode('___', $question->question); $c = 0; $answers_processed = 0; ?> 
        @foreach($sections as $section) 
          <h4>{{$section}}</h4> 
          <?php $c = $c + 1; $i = $i +1;?> 
          @if($i < 3 && $answers_processed !== count($answers)) 
           <input class="form-control answer_input" autocomplete="off" id="answer_{{$i}}" style="min-width:40px; width: {{strlen($answers[$i - 1]) * 10}}px; max-width300pheight:30px; margin-left: 10px; margin-right: 10px;" type="text" autofocus> 
          @endif 
          <?php $answers_processed = $answers_processed + 1; ?> 
        @endforeach 
      </form> 

Hoffnung jemand helfen kann, zeigen. Vielen Dank.

Answer 1

Schließen Diese nicht zwei Schlagzeilen sein sollte, sondern eher eine Schlagzeile mit einem Eingabefeld irgendwo drin.

Sie wählen die Struktur h4-input-h4 aufgrund von Problemen bei der Verarbeitung/Ausgabe der Daten in einer Schleife. Aber statt explodierenden Ihre Daten bei ___ Trennzeichen, könnten Sie einfach ersetzen dieses Trennzeichen mit dem HTML-Code für das Eingabefeld (str_replace sollte tun).

So müssen Sie sich nicht mehr mit zwei Teilen einer Frage beschäftigen, sondern einfach die Frage "als Eins" in einem einzelnen h4-Element ausgeben. Das ergibt semantisch mehr Sinn - und es wird Ihr Problem, es wie beabsichtigt zu zeigen, ebenfalls verschwinden lassen ... Zumindest in den meisten Fällen; Vielleicht möchten Sie mit dem Padding des Eingabefeldes und der Zeilenhöhe des h4 ein wenig spielen, um das gewünschte Aussehen zu bekommen & Verhalten.

Answer 2

Sie können Ihre erste balise bewegen:

<form action="" method="post" id="answers" class="card-title"> 
<h4>The 
<input class="form-control answer_input" autocomplete="off" id="answer_1" style="min-width:40px; width: 100px; max-width300pheight:30px; margin-left: 10px; margin-right: 10px;" autofocus="" type="text"></h4> 
<h4> scenes were cut from the film. (horrify)</h4> 

Answer 3

nicht den Tag h4 vor der Eingabe schließen Sie. h4 hat display: block, die eine Pause setzen, wenn

<form action="" method="post" id="answers" class="card-title"> 
 
<h4>The 
 
<input class="form-control answer_input" autocomplete="off" id="answer_1" style="min-width:40px; width: 100px; max-width: 300px;height:30px; margin-left: 10px; margin-right: 10px" autofocus="" type="text"> 
 
scenes were cut from the film. (horrify)</h4>

Answer 4

Dieser arbeitete für mich;)

<h4> 
@foreach($sections as $section) 
     <?php $c = $c + 1; $i = $i +1;?> 
      {{$section}} 
     @if($i < 3 && $answers_processed !== count($answers)) 
      <input class="form-control answer_input mb-2" autocomplete="off" id="answer_{{$i}}" style="min-width:40px; width: {{strlen($answers[$i - 1]) * 14}}px; max-width300x; display: inline-block; height:30px; margin-left: 10px; margin-right: 10px;" type="text" autofocus> 
     @endif 
     <?php $answers_processed = $answers_processed + 1; ?> 
@endforeach 
</h4>