时间戳

首页 > 解决方案 > 即使使用“box-sizing:border-box”，输入元素也比 div 容器宽

html - 即使使用“box-sizing:border-box”，输入元素也比 div 容器宽

问题描述

我有一个比 div 容器更宽的输入 html 元素（class = "text-box-name"）。正如其他常见问题解答中所解释的，例如：HTML 输入元素比包含 Div 更宽，我已申请：

* {
    box-sizing: border-box;
}

我也尝试将其直接应用于输入类型，但它不起作用。

有没有人有解决这个重叠问题的想法？

结帐.html

问题是关于“客户信息”内容（第二个主要 div）

{% extends 'store/main.html' %}
{% load static %}

{% block content %}

<div class="checkout-page">
    <form id="form">
        {% csrf_token %}
        <div class="order-summary">
            <div> <a class="back-to-button button" href="{% url 'cart' %}">&#x2190; Back to Cart</a> </div>
            <div> <h3> Order Summary </h3> </div>
            <div class = "order-summary-list"> 
            {% for item in items %}
            <div class="order-list">
                <div class="order-table"> <img class="thumbnail-small" src="{{item.product.imageURL}}"> </div>
                <div class="order-table"> <h5> // {{item.product.name}} // </h5></div>
                <div class="order-table"> <h5> // {{item.product.price|floatformat:2}} € // </h5> </div>
                <div class="order-table"> <h5> // {{item.quantity}} // </h5> </div>
            </div>
            {% endfor %}
            </div>
            <div> <h4> Items : {{order.get_cart_items}} <h4> </div>
            <div> <h4> Total : {{order.get_cart_total|floatformat:2}} € <h4> </div>
        </div>

        <div class="customer-info">
            <div id="customer-basic-info" class="customer-basic-info">  
                <div class="text-box-name"> <input required class="form text-box" type="text" name="name" placeholder="Name.."> </div>
                <div class="text-box-email"> <input required class="form text-box" type="email" name="email" placeholder="Email.."> </div>
            </div>
            <div> <h4> Shipping information </h4> </div>
            <div class="customer-shipping-info-1">
                <div class="text-box-address"> <input required class="form text-box" type="text" name="address" placeholder="Address.."> </div>
                <div class="text-box-postcode"> <input required class="form text-box" type="text" name="postcode" placeholder="Code postal"> </div>
            </div>
            <div class="customer-shipping-info-2">  
                <div class="text-box-city"> <input required class="form text-box" type="text" name="city" placeholder="Ville.."> </div>
                <div class="text-box-country"> <input required class="form text-box" type="text" name="country" placeholder="Pays.."> </div>
            </div>
        </div>

        <div class="payment-options">
            <div> <h4> Paiement <h4> </div>
            <div> <input class="button" type="submit" value="PayPal" > </div>
            <div> <button class="button" id="make-payment"> MAKE PAYMENT </button> </div>
        </div>
    </form>
</div>


{% endblock content %}

main.css

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap');


* {
    box-sizing: border-box;
}

body {
    font-family: 'Fira Sans', sans-serif;
    margin:0;
    padding: 0;
}

ul {
    margin:0;
    padding: 0;
}

li {
    list-style-type: none;
}

h1 {
    font-family: 'Akaya Telivigala', cursive;
    text-transform: uppercase;
    text-align: center;
    padding-top: 30px;
    font-size: 2.5em;
}

h2 {
    text-align: left;
    font-size: 2em;
}

h3 {
    text-align: left;
    font-size: 1.8em;
}

h4 {
    text-align: left;
    font-size: 1.5em;
}

h5 {
    text-align: left;
    font-size: 1.2em;
}

h6 {
    text-align: left;
    font-size: 1em;
}

a {
    text-decoration: none;
    color: black;
}

#page-content{
    border-style: solid;
    border-width: 4px;
    border-color: SeaGreen;
    padding-top: 175px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    background-color: #F0FFFF;
}


.thumbnail {
    width:100%;
    height:auto;
    max-height: 100%;
}

.thumbnail-small {
    max-height: 50px;
    max-width: 100px;
    height: auto;
    width : auto;
}


.form {
    background-color: DarkSalmon;
    opacity: 20%;
    margin: 1% 1% 1% 1%;
}


.button {
    border-style:solid;
    border-width: 2px;
    border-color: #696969;
    padding: 6px 12px;
    cursor:pointer;
    border-radius: 10px;
}


.text-box {
    border-style:solid;
    border-width: 2px;
    border-color: Gray;
    padding: 6px 12px;
    border-radius: 10px;
    display:table-cell; 
    width:100%;
}



/*------------------------Navigation bar -----------------------------*/


header nav {
    overflow: hidden;
    background-color: #FFFAE1;
    position:fixed;
    width:100%;
    opacity:0.6;
    border-style:solid;
    border-width: 3px;
    border-color: red;
}

header li {
    float: left;
    font-size: 1.2em;
}


header li a {
    text-decoration: none;
    display: block;
    text-align: center;
    padding:15px 15px;
}

#logo {
    font-family: 'Akaya Telivigala', cursive;
    font-size: 1.2em;
    font-weight: bold;
    float: left;
}

#cart-count {
    color: white;
    background: red;
    vertical-align: top;
    padding: 0 5px;
    margin-left: -20px;
    border-radius: 9px;
}

/*------------------------Products catalog -----------------------------*/


.products-page {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, 400px);
    grid-template-rows: repeat(1, auto);    
}


.product-box {
    border-style: solid;
    border-width: 3px;
    border-color: green;
    padding: 3%; 
}

.thumbnail-box {
    border-style: solid;
    border-width: 2px;
    border-color: RoyalBlue;
    margin-top: 2%;
}

/*------------------------Cart page -----------------------------*/


.cart-summary{
    display: flex;
    border-style: solid;
    border-width: 2px;
    border-color: brown;
    justify-content: space-between;
    width: 100%;
    padding: 2% 2% 2% 2%;

}

.cart-details-title {
    display: flex;
    border-style: solid;
    border-width: 2px;
    border-color: orange;
    justify-content: space-between;
    width: 100%;
    padding: 2% 2% 2% 2%;
}

.cart-details-content {
    display: flex;
    border-style: solid;
    border-width: 2px;
    border-color: pink;
    justify-content: space-between;
    width: 100%;
    padding: 2% 2% 2% 2%;

}

.quantity-sorting {
    display: flex;
    border-style: solid;
    border-width: 1px;
    border-color: purple;
    justify-content: center;
}

.fa-sort{
    color: orange;
    cursor:pointer;
}


.cart-table {
    border-style: solid;
    border-width: 2px;
    border-color: Tomato;
    width: 20%;
    margin: auto;
    text-align: center;

}

.cart-container {
    justify-content: space-between;
}


.cart-table-quantity {
    border-style: solid;
    border-width: 1px;
    border-color: SpringGreen;
    padding-left: 5%;
    padding-right: 5%;
}



/*------------------------Checkout page -----------------------------*/


.checkout-page {
    border-style: solid;
    border-width: 2px;
    border-color: Indigo;
}

.order-summary {
    border-style: solid;
    border-width: 1px;
    border-color: Maroon;   
}

.order-list {
    display: flex;
}


.order-table {
    border-style: solid;
    border-width: 2px;
    border-color: Tomato;
    width: 25%;
    margin: auto;
}




.customer-info {
    border-style: solid;
    border-width: 1px;
    border-color: MediumBlue;   
}

.customer-basic-info, .customer-shipping-info-1, .customer-shipping-info-2 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex-basis: 100%;
    background-color: MistyRose;
}

.customer-info input {
    width: 100%;
}

.payment-options {
    border-style: solid;
    border-width: 1px;
    border-color: #FFD700;  
}

.text-box-name, 
.text-box-email,
.text-box-address,
.text-box-postcode,
.text-box-city,
.text-box-country
 {
    background-color: PaleGreen;
    border-style: solid;
    border-width: 1px;
    border-color: OrangeRed;
    margin:auto;
    text-align: center;
}

.text-box-name, 
.text-box-email,
.text-box-city,
.text-box-country
 {
    width:50%;  
}


.text-box-address {
    width:70%;  
}


.text-box-postcode {
    width:30%;  
}



/*------------------------Footer-----------------------------*/

footer {
    margin-top: 160px;
    background-color: green;
    opacity: 50%;
    border-style:solid;
    border-width: 3px;
    border-color: purple;
    flex-basis: 100%;
}


#copyright {
    width:30%;
    text-align:left;
    padding:1% 10%;
}

标签： htmlcsslayoutfrontendweb-frontend

解决方案

您是否在开发工具中查看过它的属性？可能在某个地方有一些其他规则的余量。

推荐阅读