Question

我为每个循环放置了h4标签之间的输入字段，但是当我在手机上打开网页时，我看到文本有一个看起来很奇怪的换行符。

我希望文本显示为＆＃39; [文字输入]场景是从电影中剪下的。＆＃39;以一种易于阅读的方式。要做到这一点，文本输入字段需要保持一行文本的高度，并且无论在哪里发生换行，它都应该从＆＃39;＆＃39;开始。我已经搜索了很多解决方案，直到现在我还没有找到任何解决方案。

这可以通过一些简单的CSS修复，还是需要我做一些JS？

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

这是您在上面看到的屏幕截图的当前代码。它添加了一些CSS，使其成为弹性行。

这是显示表单的刀片代码

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

希望有人可以提供帮助。感谢。

Answer 1

你可以移动你的第一个balise：

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

请勿在输入前关闭代码h4。 h4有display: block，在关闭

时会中断

＆＃13;

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

＆＃13;

Answer 3

This should not be two headlines, but rather one headline with an input field somewhere in it.

You choose the h4-input-h4 structure based on problems handling/outputting the data in a loop. But instead of exploding your data at the private Bitmap TakeScreenshot() { //Create a new bitmap. var bmpScreenshot = new Bitmap(Screen.PrimaryScreen.Bounds.Width, Screen.PrimaryScreen.Bounds.Height, System.Drawing.Imaging.PixelFormat.Format32bppArgb); // Create a graphics object from the bitmap. using (var gfxScreenshot = Graphics.FromImage(bmpScreenshot)) { // Take the screenshot from the upper left corner to the right bottom corner. gfxScreenshot.CopyFromScreen(Screen.PrimaryScreen.Bounds.X, Screen.PrimaryScreen.Bounds.Y, 0, 0, Screen.PrimaryScreen.Bounds.Size, CopyPixelOperation.SourceCopy); } return bmpScreenshot; } delimiter, you could simply replace that delimiter with the HTML code for the input field (str_replace should do).

That way, you don't have to deal with two parts of one question any more, but can simply output the question "as one" inside a single h4 element. That makes more sense semantically - and will make your problem displaying it as intended go away, too ... At least for the most part; you might want to play with the padding of the input field and the line-height of the h4 a little to get the desired look & behavior.

Answer 4

这对我有用;）

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

在新行的开头使h4标记行中断

4 个答案: