将文字放在表格行内的按钮后面

Question

我要存档的是在第一个按钮后面放置文本Update-state。他们都在一张桌子上。那里怎么了？

.container {
  margin-top: 20px;
  margin-bottom: 20px;
}

<div class="table-responsive">
  <table class = "table table-striped  table-hover">
  <tr>
    <th>Actions</th>
  </tr>
  <tr>
    <td>
      <div class="form-list vertical">
        <div class="horizontal">
          <div class="form-actions no-color">
            <input class="loader-button small-button" type="submit" value="Update" />
          </div>
          <div class="button-state">
            Update-state
          </div>
        </div>
        
        <div class="form-actions no-color">
          <input class="loader-button small-button" type="submit" value="Restore" />
        </div>
        <div class="form-actions no-color">
          <input class="loader-button small-button" type="submit" value="Backup" />
        </div>
    </div>
    </td>
  </tr>
  </table>
</div>

Jsfiddle

Answer 1

我添加了一些CSS，以使更新状态退后。希望对您有帮助。

  <style>
    .container {
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .table{
      min-width:100%;
    }
    .horizontal{
      position:relative;
      min-width:100%;
    }
    .horizontal .form-actions.no-color{
      position:relative;
      z-index:10;
    }
    .horizontal .form-actions.no-color + .button-state{
      position:absolute;
      z-index:0;
      top:0;
      left:0;
      min-width:100%;
    }
    </style>
    <div class="table-responsive">
      <table class = "table table-striped  table-hover">
      <tr>
        <th>Actions</th>
      </tr>
      <tr>
        <td>
          <div class="form-list vertical">
            <div class="horizontal">
              <div class="form-actions no-color">
                <input class="loader-button small-button" type="submit" value="Update--1" />
              </div>
              <div class="button-state">
                Update-state
              </div>
            </div>

            <div class="form-actions no-color">
              <input class="loader-button small-button" type="submit" value="Restore" />
            </div>
            <div class="form-actions no-color">
              <input class="loader-button small-button" type="submit" value="Backup" />
            </div>
        </div>
        </td>
      </tr>
      </table>
    </div>

Answer 2

messages: {
  ".read": "query.orderByKey &&
            query.limitToFirst <= 1000"
}

db.ref("messages").on("value", cb)                // Would fail with PermissionDenied

db.ref("messages").limitToFirst(1000)
                  .on("value", cb)                // Would succeed (default order by key)