Question

我正在尝试使用CSS在文本之间画一条线...但是我不知道该怎么做。

我正在使用引导程序。所以我有一个像

              @php
                use Illuminate\Support\Facades\DB;
                $cid=DB::table('classses')->get();
                $uid=DB::table('users')->where('role_id','3')->get();
                $counter=0;
                @endphp

                <select class="" name="class_id">
                    <option value="null">Class</option>
                    @foreach($cid as $class)
                        @if($counter==0)
                        <option selected="selected" value="{{$class->id}}">{{$class->title}}</option>
                        {{$counter++}}
                    @else

                        <option value="{{$class->id}}">{{$class->title}}</option>
                    @endif
                            @endforeach
                </select>

我希望所有这些破折号都是将HELLO和日期分开的一行...

有帮助吗？

Answer 1

您还可以使用flex-box来对齐同一父项中的项目。我对您的HTML标记做了一些更改，看起来：

.flex-paragraph {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.line-separator {
  border-bottom: 1px dashed #000;
  flex: 1;
}

<div class="row">
  <div class="col-12">
    <p class="flex-paragraph">
      <span>HELLO</span>
      <span class="line-separator"></span>
      <span>6/04/2019</span>
    </p>
    <p> Some text </p>
  </div>
</div>

使用CSS和HTML在同一块中用一行分隔文本

1 个答案: