Question

我最近使用HTML，需要帮助。

我有此页面，我想将CSS应用于按钮，但是我对如何正确指定此按钮的路径有些困惑。

<div class="cart">
  <div class="container">
    <div class="cart-info">
      <div class="order">
        <form action="order" method="POST">

          <h4>Pay type: </h4>
          <select name="pay_type">
            <option value="Visa">Visa</option>
            <option value="MasterCard">MasterCard</option>
          </select>
          <br>
          <br>

          <table>
            <tr>
              <th>Name</th>
              <th>Count </th>
              <th>Price</th>
            </tr>

            <c:forEach items="${cartItems}" var="items">
              <tr>
                <td> ${items.key.name} </td>
                <td> ${items.value} </td>
                <td> ${items.key.price * items.value} </td>
              </tr>
            </c:forEach>
          </table>


          <div align="right">
            <h4> Total price: ${sessionScope.totalPrice} </h4>
          </div>

          <input name="cart_id" placeholder="cart number" required><br>
          <input type="submit" value="Confirm">
      </div>
      </form>


    </div>

我正在尝试这种方式，但是没有用

div.cart div.container div.cart-info div.order form input[type="submit"]{
  width:80%;
  margin:0 auto;
  display:block;
}

如何指定按钮的路径？

Answer 1

如果要使用CSS设置样式，则无需指定input [type =“ submit”]按钮的路径。您需要做的就是创建一个CSS类或ID选择器，向其中添加所需的样式，然后将该类/ id添加到input [type =“ submit”]按钮，如下所示。

CSS

.btn-submit{
//this is a CSS class, can be reused
     background-color: green;
     color: white;
   }

HTML

<input type="submit" value="Confirm" class="btn-submit">

Answer 2

抱歉，为什么要那样做？最好创建一个类，然后通过该类或通过id为其指定样式。您还可以给标签“ form”添加一个类，然后导航至按钮，这样做非常容易理解，也没有必要。

但是，发生的事情是您的html的结构不良，并且您打开了一些div标签，但您从未关闭它们。在这里，我给你html。

<div class="cart">
  <div class="container">
    <div class="cart-info">
      <div class="order">
        <form action="order" method="POST">

          <h4>Pay type: </h4>
          <select name="pay_type">
            <option value="Visa">Visa</option>
            <option value="MasterCard">MasterCard</option>
          </select>
          <br>
          <br>

          <table>
            <tr>
              <th>Name</th>
              <th>Count </th>
              <th>Price</th>
            </tr>

            <c:forEach  items="${cartItems}" var="items">
              <tr>
                <td> ${items.key.name} </td>
                <td> ${items.value} </td>
                <td> ${items.key.price * items.value} </td>
              </tr>
            </c:forEach>
          </table>


          <div align="right"> <h4> Total price: ${sessionScope.totalPrice} </h4> </div>

          <input name="cart_id" placeholder="cart number" required><br>
          <input type="submit" value="Confirm" />
        </form>
      </div>
    </div>
  </div>
</div>

我希望你工作

Answer 3

我更喜欢只使用这样的东西：

.cart form input[type="submit"]{ ... } 简洁明了且语义合理，认为最好为表单设置类而不是为提交按钮设置类。但是不需要。

如何通过多个div指定元素的路径？

3 个答案: