浮动或显示：内联＆＃39;带有css背景图片的输入标签

时间：2018-01-29 21:38:25

标签： html css css-float background-image css-position

我已经修改了包含数量输入和添加到购物车按钮的购物车表单的HTML结构：

enter image description here

但我想要数量输入字段旁边的添加到购物车按钮，如下所示：

enter image description here

当我尝试将字段的显示设置为内联/内联块或我浮动它们时，背景图像表现得很奇怪，您可以在此图片或代码段（or alternatively in this fiddle）中看到：

enter image description here

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

将position: relative添加到标签，并使用top和否定left（而不是负margin）将伪元素与其相对定位。由于label是block级别元素，请将其设置为inline，以便在输入后对其进行排列。

fiddle

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题