代码之家 › 专栏 › 技术社区 › Madamadam

浮动或“显示:内联”带有css背景图像的输入标签

css-position background-image css-float css html

0

Madamadam · 技术社区 · 8 年前

我有一个固定的购物车表单HTML结构,包含数量输入和“添加到购物车”按钮:

但我希望数量输入字段旁边的添加到购物车按钮如下所示:

当我尝试将字段的显示设置为内联/内联块或浮动字段时,背景图像的行为会很奇怪,正如您在该图像或代码段中看到的那样( or alternatively in this fiddle ):

table {
  border-collapse: collapse;
}

th {
  border-bottom: 3px solid #ccc;
  padding-right: 1em;
  text-align: left;
}

tbody {
  border-top: 1px solid #ccc;
}

tr.even,
tr.odd {
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  padding: 0.1em 0.6em;
}

label {
  display: block;
}

form.commerce-add-to-cart input {
  padding-left: 28px;
}

form.commerce-add-to-cart input.form-submit+label::before {
  background-image: url('http://files.softicons.com/download/business-icons/free-e-commerce-icons-by-design-bolts/png/96x96/Shopping-Basket-Icon.png');
  position: absolute;
  background-size: 18px 18px;
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: text-bottom;
  content: "";
  background-repeat: no-repeat;
  padding-right: 0.25em;
  margin: -21px 0 0 6px;
}

body.page-all-books .form-item-quantity label {
  display: none;
}

input[type="submit"] {
  -webkit-appearance: none;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
  border-radius: 2px;
  background-color: #d3cfe8;
  border: 1px solid #d3cfe8;
  cursor: pointer;
  color: #333;
  font: normal 12px/1.2 "OpenSans", sans-serif;
  outline: 0;
  overflow: visible;
  padding: 3px 6px 4px;
  text-shadow: none;
  width: auto;
}

table {
  border: 0 solid #CCC;
  width: 100%;
}

thead th,
th {
  background-color: #eeeeee;
}

tr.even td,
tr.odd td {
  background-color: #ffffff;
}

tr:hover td {
  background: #f7f7f7;
}

div.form-item-quantity {
  display: inline-block;
}

<body class="page-all-books">
  <div class="view-content">
    <table>
      <thead>
        <tr>
          <th>
            Published</th>
          <th>
            Price</th>
          <th>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="odd">
          <td>
            2016
          </td>
          <td>
            12,00&nbsp; EUR
          </td>
          <td>
            <form class="commerce-add-to-cart" id="form-1">
              <div>
                <input name="product_id" value="45" type="hidden">
                <label for="input"></label>
                <input name="form_build_id" value="form-1" type="hidden">
                <label for="input"></label>
                <input name="form_id" value="form_1" type="hidden">
                <label for="input"></label>
                <div id="edit-line-item-fields" class="form-wrapper"></div>
                <div class="form-item-quantity">
                  <label for="edit-quantity">Quantity </label>
                  <input id="edit-quantity" name="quantity" value="1" size="5" type="text">
                  <label for="input"></label>
                </div>
                <input id="edit-submit" name="op" value="Add to cart" class="form-submit" type="submit">
                <label for="input"></label>
              </div>
            </form>
          </td>
        </tr>

        <tr class="even">
          <td>
            2010
          </td>
          <td>
            19,90&nbsp; EUR
          </td>
          <td>
            <form class="commerce-add-to-cart" id="form-2">
              <div>
                <input name="product_id" value="45" type="hidden">
                <label for="input"></label>
                <input name="form_build_id" value="form-2" type="hidden">
                <label for="input"></label>
                <input name="form_id" value="form_2" type="hidden">
                <label for="input"></label>
                <div id="edit-line-item-fields" class="form-wrapper"></div>
                <div class="form-item-quantity">
                  <label for="edit-quantity">Quantity </label>
                  <input id="edit-quantity" name="quantity" value="1" size="5" type="text">
                  <label for="input"></label>
                </div>
                <input id="edit-submit" name="op" value="Add to cart" class="form-submit" type="submit">
                <label for="input"></label>
              </div>
            </form>
          </td>
        </tr>

        <tr class="odd">
          <td>
            2018
          </td>
          <td>
            42,00&nbsp; EUR
          </td>
          <td>
            <form class="commerce-add-to-cart" id="form-3">
              <div>
                <input name="product_id" value="45" type="hidden">
                <label for="input"></label>
                <input name="form_build_id" value="form-3" type="hidden">
                <label for="input"></label>
                <input name="form_id" value="form_3" type="hidden">
                <label for="input"></label>
                <div id="edit-line-item-fields" class="form-wrapper"></div>
                <div class="form-item-quantity">
                  <label for="edit-quantity">Quantity </label>
                  <input id="edit-quantity" name="quantity" value="1" size="5" type="text">
                  <label for="input"></label>
                </div>
                <input id="edit-submit" name="op" value="Add to cart" class="form-submit" type="submit">
                <label for="input"></label>
              </div>
            </form>
          </td>
        </tr>

      </tbody>
    </table>
  </div>
</body>

1 回复 | 直到 8 年前

1

sol 8 年前

添加 position: relative ,并使用 top 和负值 left (而不是负值 margin ). 像 label 是 block level元素,将其设置为 inline 在输入后将其对齐。

fiddle

table {
  border-collapse: collapse;
}

th {
  border-bottom: 3px solid #ccc;
  padding-right: 1em;
  text-align: left;
}

tbody {
  border-top: 1px solid #ccc;
}

tr.even,
tr.odd {
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  padding: 0.1em 0.6em;
}

label {
  display: inline;
}

form.commerce-add-to-cart input {
  padding-left: 28px;
}

label {
  position: relative;
}

form.commerce-add-to-cart input.form-submit+label::before {
  background-image: url('http://files.softicons.com/download/business-icons/free-e-commerce-icons-by-design-bolts/png/96x96/Shopping-Basket-Icon.png');
  position: absolute;
  background-size: 18px 18px;
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: text-bottom;
  content: "";
  background-repeat: no-repeat;
  padding-right: 0.25em;
  top: 0;
  left: -90px;
}

body.page-all-books .form-item-quantity label {
  display: none;
}

input[type="submit"] {
  -webkit-appearance: none;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
  border-radius: 2px;
  background-color: #d3cfe8;
  border: 1px solid #d3cfe8;
  cursor: pointer;
  color: #333;
  font: normal 12px/1.2 "OpenSans", sans-serif;
  outline: 0;
  overflow: visible;
  padding: 3px 6px 4px;
  text-shadow: none;
  width: auto;
}

table {
  border: 0 solid #CCC;
  width: 100%;
}

thead th,
th {
  background-color: #eeeeee;
}

tr.even td,
tr.odd td {
  background-color: #ffffff;
}

tr:hover td {
  background: #f7f7f7;
}

div.form-item-quantity {
  display: inline-block;
}

<body class="page-all-books">
  <div class="view-content">
    <table>
      <thead>
        <tr>
          <th>
            Published</th>
          <th>
            Price</th>
          <th>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="odd">
          <td>
            2016
          </td>
          <td>
            12,00&nbsp; EUR
          </td>
          <td>
            <form class="commerce-add-to-cart" id="form-1">
              <div>
                <input name="product_id" value="45" type="hidden">
                <label for="input"></label>
                <input name="form_build_id" value="form-1" type="hidden">
                <label for="input"></label>
                <input name="form_id" value="form_1" type="hidden">
                <label for="input"></label>
                <div id="edit-line-item-fields" class="form-wrapper"></div>
                <div class="form-item-quantity">
                  <label for="edit-quantity">Quantity </label>
                  <input id="edit-quantity" name="quantity" value="1" size="5" type="text">
                  <label for="input"></label>
                </div>
                <input id="edit-submit" name="op" value="Add to cart" class="form-submit" type="submit">
                <label for="input"></label>
              </div>
            </form>
          </td>
        </tr>

        <tr class="even">
          <td>
            2010
          </td>
          <td>
            19,90&nbsp; EUR
          </td>
          <td>
            <form class="commerce-add-to-cart" id="form-2">
              <div>
                <input name="product_id" value="45" type="hidden">
                <label for="input"></label>
                <input name="form_build_id" value="form-2" type="hidden">
                <label for="input"></label>
                <input name="form_id" value="form_2" type="hidden">
                <label for="input"></label>
                <div id="edit-line-item-fields" class="form-wrapper"></div>
                <div class="form-item-quantity">
                  <label for="edit-quantity">Quantity </label>
                  <input id="edit-quantity" name="quantity" value="1" size="5" type="text">
                  <label for="input"></label>
                </div>
                <input id="edit-submit" name="op" value="Add to cart" class="form-submit" type="submit">
                <label for="input"></label>
              </div>
            </form>
          </td>
        </tr>

        <tr class="odd">
          <td>
            2018
          </td>
          <td>
            42,00&nbsp; EUR
          </td>
          <td>
            <form class="commerce-add-to-cart" id="form-3">
              <div>
                <input name="product_id" value="45" type="hidden">
                <label for="input"></label>
                <input name="form_build_id" value="form-3" type="hidden">
                <label for="input"></label>
                <input name="form_id" value="form_3" type="hidden">
                <label for="input"></label>
                <div id="edit-line-item-fields" class="form-wrapper"></div>
                <div class="form-item-quantity">
                  <label for="edit-quantity">Quantity </label>
                  <input id="edit-quantity" name="quantity" value="1" size="5" type="text">
                  <label for="input"></label>
                </div>
                <input id="edit-submit" name="op" value="Add to cart" class="form-submit" type="submit">
                <label for="input"></label>
              </div>
            </form>
          </td>
        </tr>

      </tbody>
    </table>
  </div>
</body>