Question

我有此HTML代码，我想在其上方放置一个代码，但是，无论我做什么，它总是放置在表单的左侧。

我知道这是一个非常基本的问题，但是我对CSS并不了解。我应该怎么做？是否有w3类可以为我做到这一点？

.bookbox{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #FFFFFF;
  margin: 16px !important;
  box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
}

.bookcard{
  margin-top: 120px !important;
  margin-bottom: 120px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #FFFFFF;
  clear: both;
}

.float-left {
  float: left !important;
}

.m-1 {
  margin: 0.25rem !important;
}

<div class="bookbox">
    <h3>I'd like this to place above the bookcard</h3>
    <div class="bookcard">
        <form class="w3-container" method="GET" action="{{config('app.PATH_TO_INDEX', '')}}/findCar">
            <div class="float-left m-1">
                <input type="text" name="Standort" list="Standorte" class="w3-input w3-border" placeholder="Standort">
                    <datalist id="Standorte">
                        <option value="example"></option>
                    </datalist>
            </div>
            <div class="float-left m-1">
                <input type="text" name="Startdatum" class="date w3-input w3-border" id="f0date" placeholder="Startdatum">
            </div>
            <div class="float-left m-1">
                <input type="text" name="Enddatum" class="date w3-input w3-border {{ $errors->has('Enddatum') ? 'border-danger' : '' }}" id="f1date" placeholder="Enddatum">
            </div>
            <div class="float-left m-1">
                <button type="submit" class="w3-button margin-small signalButton w3-hover-text-blue w3-blue-grey w3-hover-blue-grey w3-hover-opacity" id="submit0">Fahrzeug finden</button>
            </div>
        </form>
    </div>        
</div>

感谢您的帮助

Answer 1

将flex-wrap:wrap添加到.bookbox，将width:100%添加到图书卡

Answer 2

为什么不把h3开箱即用，然后放到前面，那么在框上设置的flex规则就是标题的行为。

.bookbox {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #FFFFFF;
  margin: 16px !important;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}

.bookcard {
  margin-top: 120px !important;
  margin-bottom: 120px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #FFFFFF;
  clear: both;
}

.float-left {
  float: left !important;
}

.m-1 {
  margin: 0.25rem !important;
}

h3 {
  text-align: center;
}

<h3>I'd like this to place above the bookcard</h3>
<div class="bookbox">
  <div class="bookcard">
    <form class="w3-container" method="GET" action="{{config('app.PATH_TO_INDEX', '')}}/findCar">
      <div class="float-left m-1">
        <input type="text" name="Standort" list="Standorte" class="w3-input w3-border" placeholder="Standort">
        <datalist id="Standorte">
                        <option value="example"></option>
                    </datalist>
      </div>
      <div class="float-left m-1">
        <input type="text" name="Startdatum" class="date w3-input w3-border" id="f0date" placeholder="Startdatum">
      </div>
      <div class="float-left m-1">
        <input type="text" name="Enddatum" class="date w3-input w3-border {{ $errors->has('Enddatum') ? 'border-danger' : '' }}" id="f1date" placeholder="Enddatum">
      </div>
      <div class="float-left m-1">
        <button type="submit" class="w3-button margin-small signalButton w3-hover-text-blue w3-blue-grey w3-hover-blue-grey w3-hover-opacity" id="submit0">Fahrzeug finden</button>
      </div>
    </form>
  </div>
</div>

将<h3>放在表格/ div上

2 个答案: