html - float 或 'display: inline' 带有 css 背景图像的输入标签-6ren

html - float 或 'display: inline' 带有 css 背景图像的输入标签

转载作者：太空宇宙更新时间：2023-11-04 07:41:04

我有一个包含数量输入和添加到购物车按钮的购物车表单的修复 HTML 结构:

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

当我尝试将字段的显示设置为内联/内联 block 或 float 它们时，背景图像表现得很奇怪，如您在此图像或代码片段 (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>

最佳答案

将position: relative添加到标签中，并使用top和负left(而不是负 margin )。由于 label 是 block 级元素，将其设置为 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>

关于html - float 或 'display: inline' 带有 css 背景图像的输入标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48510419/

文章推荐： python - 如何用逗号分割 python 列表

文章推荐： c - 在 struct - C 中初始化数组？

文章推荐： c - 传递/修改多维数组以在 C 中运行

android - 除了 Display.getOrientation() 已弃用之外，Display.getRotation() 和 Display.getOrientation() 之间有什么区别？
除了 Display.getOrientation() 已弃用之外，Display.getRotation() 和 Display.getOrientation() 之间还有什么区别？是否都返回等于
html - float :left; vs display:inline; vs display:inline-block; vs display:table-cell;
我的问题这些方法中有哪一种是专业网页设计师所偏爱的吗？ Web 浏览器在绘制网站时是否首选这些方法中的任何一种？这只是个人喜好吗？我还缺少其他技巧吗？注意:以上问题是关于设计多列布局 floa
html - float :left; vs display:inline; vs display:inline-block; vs display:table-cell;
我的问题专业网页设计师是否喜欢这些方法？网页浏览器在绘制网站时是否首选这些方法？这只是个人喜好吗？我还缺少其他技术吗？注意:以上问题与设计多列布局有关 float :左； http://js
rust - 如何在类型已经实现 Display 的特征对象上实现 Display
我有一些代码返回 MyTrait 类型的特征对象，这样它就可以返回几个不同结构之一。我想为 trait 对象实现 Display trait，这样我就可以打印对象，并将详细信息委托(delegate)
java - 当重载相同的方法 display(String s ) 和 display(Object o) 时，当从 main 方法的方法中传递 null 时，为什么调用 display(String s )？
package polymorphism; /* * @author Rahul Tripathi */ public class OverLoadingTest { /** *
swt - Display.asyncExec 与 Display.timerExec
我希望 Display.timerExec(int,Runnable)与 Display.asyncExec(Runnable) 大致相同但有指定的延迟。然而，似乎Display.timerExec只
python - pygame.display.update和pygame.display.flip之间的区别
就像标题所暗示的，有什么区别吗？我当时使用的是pygame.display.flip，我在互联网上看到的是，他们使用pygame.display.update而不是使用flip。哪一个更快？最佳答案
java - Sample.this.display() 和 this.display() 之间的区别
Sample.this.display() 和 this.display() 哪个更好？ class Sample{ void display(){ System.out.println("d
javascript - JS监控CSS属性变化如 "display:none"= >"display:block"？
当图像的 CSS 属性“显示”已被任何其他 JS 脚本/函数更改时，我想运行一些 JS 代码。有什么方法可以监视该更改并设置回调函数吗？ $(this).bind.('propertychange',
css - 什么是谷歌字体的 "Display"类别/"Display font"
在浏览 Google 字体时我注意到第一个过滤器包含这些类别: Serif Sans 衬线展示手写我知道什么是 (Sans)Serif 和 Handwriting 类别(这很明显)但是显示类别过
java - 自定义 html
我想知道是否可以在列标记内渲染自定义 html，这是显示表标记的一部分。例如，我希望我的专栏里面有一些下拉列表？使用纯 html，如下所示: ... Volvo Saab Me
image - 电晕中的 display.newImage() 与 display.newImageRect()
display.newImage() 和 display.newImageRect() 有什么区别？哪个更好用？最佳答案 display.newImage() 的文档具体提到: NOTE: dis
javascript - 配对显示 : flex with display: block and display: none
我正在使用纯 JS 和 flexbox 为我的元素创建网格。元素的某些部分在页面加载时被显示隐藏:无，但单击按钮后它应该在不显示和阻止之间切换。可悲的是，这完全破坏了 display: flex
html - .desktop {display :none;}/. mobile {display:inline;}
我目前正在参加 HTML/CSS 类(class)，这本书推荐我使用.desktop {display:none;}/.mobile {display:inline;} 以及div class="de
javascript - 单击时从 'display : none' 过渡到 'display:inline'
这个问题在这里已经有了答案: Css transition from display none to display block, navigation with subnav [duplicat
html - 风格="display: block"和风格="display: "的区别
我理解 style="display: none" 隐藏一个 HTML 元素，而 style="display: block" 显示一个 block 级 HTML 元素。我看到一些使用 style=
html - display none 和 display block 的区别
设置控件的样式 display: none 和 display: block 有什么区别？最佳答案 display 属性定义了某个 HTML 元素应该如何显示。 Display block 和 no
javascript - this.state.display &&
Displayed!
有效，但反之则不然？
这个问题已经有答案了: Javascript AND operator within assignment (7 个回答) 已关闭 4 年前。假设我只想在 this.state.display 为
struct - 如何从结构中获取 fmt::Display 并将其显示在另一个结构的 fmt::Display 中？
我不确定如何命名这个问题，因为我是 Rust 新手，所以请随意提出修改建议。我有两个结构。一个是 Job 结构，其中包含一些数字，例如作业需要多长时间等。另一个是 JobSequence，其中包含
struct - 如何从结构中获取 fmt::Display 并将其显示在另一个结构的 fmt::Display 中？
我不确定如何命名这个问题，因为我是 Rust 新手，所以请随意提出修改建议。我有两个结构。一个是 Job 结构，其中包含一些数字，例如作业需要多长时间等。另一个是 JobSequence，其中包含

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - float 或 'display: inline' 带有 css 背景图像的输入标签

Displayed!