html - 所有 HTML 元素均无效(无法输入输入)，表单未并排对齐

Question

CSS:

/* SHIPPING FORM 
===============================================================================================
*/
::placeholder{
  font-weight: 600;
}


#shipping-form{
  margin-top: 120px;
  margin-left: 150px;
  max-width: 440px;
}

.input-element{
  background-color: #0C0C0D !important;
  height: 30px;
  width: 200px;
  margin-bottom: 20px;
  border: none;
  padding: 15px;
  z-index: 1;
}

.full-length{
  width: 440px !important;
}

.left{
  float: left;
}
.right{
  float: right;
}

#shipping-title{
  color: white;
  margin-bottom: 50px;
}

#shipping-title-wrapper{
  margin-left: 170px;
}

#shipping-icon{
  width: 15%;
  margin-left: 25px;
}

/* BILLING FORM 
===============================================================================================
*/

#billing-form{
  float: right;
  max-width: 440px;
  margin-right: 100px;
}

#billing-title{
  color: white;
  margin-bottom: 50px;
  margin-left: 15px;
}

#add-button{

  background-color: #4FEB75;
}

.billing-buttons{
  font-size: 14px;
  color: white;
  font-weight: 800;
  border: none;
  width: 136px;
  height: 30px; 
  margin-right: 15px;
  margin-top: 30px;
}

#delete-button{
  background-color: #F5576C;
}

HTML:

<div id="shipping-section"></div>
    <form id="shipping-form">
            <div id="shipping-title-wrapper">
                <img src="Profiles Icon.svg" id="shipping-icon"></img>
                    <h2 id="shipping-title">Shipping</h2>
                </div>
        <input class="input-element left" id="first-name" placeholder="First Name"></input>
        <input class="input-element right" id="last-name" placeholder="Last Name"></input>
        <input class="input-element left full-length" id="email-address" placeholder="Email Address"></input>
        <input class="input-element left full-length" id="adress-line-1" placeholder="Address Line 1"></input>
        <input class="input-element left full-length" id="address-line-2" placeholder="Address Line 2"></input>
        <input class="input-element left" id="house-name" placeholder="House Name/Num"></input>
        <input class="input-element right" id="country-name" placeholder="Country"></input>
        <input class="input-element left" id="city-name" placeholder="City/State"></input>
        <input class="input-element right" id="postcode-name" placeholder="Postcode/Zipcode"></input>

        <div>
                <button class="billing-buttons" id="add-button">Add</button>
                <button class="billing-buttons" id="delete-button">Delete</button>
            </div>

    </form>

</div>



<div id="billing-form">
        <form id="shipping-form">
                <div id="shipping-title-wrapper">
                    <img src="Billing Icon.svg" id="shipping-icon"></img>
                        <h2 id="billing-title">Billing</h2>
                    </div>
            <input class="input-element left" id="first-name" placeholder="First Name"></input>
            <input class="input-element right" id="last-name" placeholder="Last Name"></input>
            <input class="input-element left full-length" id="email-address" placeholder="Email Address"></input>
            <input class="input-element left full-length" id="adress-line-1" placeholder="Address Line 1"></input>
            <input class="input-element left full-length" id="address-line-2" placeholder="Address Line 2"></input>
            <input class="input-element left" id="house-name" placeholder="House Name/Num"></input>
            <input class="input-element right" id="country-name" placeholder="Country"></input>
            <input class="input-element left" id="city-name" placeholder="City/State"></input>
            <input class="input-element right" id="postcode-name" placeholder="Postcode/Zipcode"></input>
            <input class="input-element left full-length" id="card-name" placeholder="Card Name"></input>
            <input class="input-element left full-length" id="card-number" placeholder="Card Number"></input>
            <input class="input-element left" id="exp-date" placeholder="Exp Date (MM/YY)"></input>
            <input class="input-element right" id="exp-date" placeholder="CVV"></input>







        </form>
</div>

我遇到的问题是页面上的所有 HTML 元素都无法正常运行，即我无法点击输入字段，也无法点击按钮。样式也完全错误，在我尝试将新表单添加到单独的页面之前，这两个表单曾经并排放置。我知道我可能做了一些愚蠢的事情，但花了几个小时试图修复它。

Answer 1

<div id="shipping-section"></div>

因为 shipping-section 在这里关闭，并且您的表单中没有指定宽度属性，所以它假定为 100% 宽度。尝试将您的运输表格包装在运输部分容器中。

由于宽度和边距的原因，您的表单不会并排 float 。

并且您输入的文本颜色为黑色，这意味着它在输入字段背景下不可见。尝试将其更改为白色

工作代码见下文

<html>
<style>
/* SHIPPING FORM 
===============================================================================================
*/
::placeholder{
  font-weight: 600;
}

#shipping-section {
width: 40%;
float: left;
}
#shipping-form{
  margin-top: 120px;
  margin-left: 150px;
  max-width: 440px;
}

.input-element{
  background-color: #0C0C0D !important;
  height: 30px;
  width: 200px;
  margin-bottom: 20px;
  border: none;
  padding: 15px;
  z-index: 1;
  color: #fff;
}

.full-length{
  width: 440px !important;
}

.left{
  float: left;
}
.right{
  float: right;
}

#shipping-title{
  color: white;
  margin-bottom: 50px;
}

#shipping-title-wrapper{
  margin-left: 170px;
}

#shipping-icon{
  width: 15%;
  margin-left: 25px;
}

/* BILLING FORM 
===============================================================================================
*/

#billing-form{
  float: left;
  margin-right: 100px;
  width: 40%;
}

#billing-title{
  color: white;
  margin-bottom: 50px;
  margin-left: 15px;
}

#add-button{

  background-color: #4FEB75;
}

.billing-buttons{
  font-size: 14px;
  color: white;
  font-weight: 800;
  border: none;
  width: 136px;
  height: 30px; 
  margin-right: 15px;
  margin-top: 30px;
}

#delete-button{
  background-color: #F5576C;
}
</style>


<div id="shipping-section">
    <form id="shipping-form">
            <div id="shipping-title-wrapper">
                <img src="Profiles Icon.svg" id="shipping-icon"></img>
                    <h2 id="shipping-title">Shipping</h2>
                </div>
        <input class="input-element left" id="first-name" placeholder="First Name"></input>
        <input class="input-element right" id="last-name" placeholder="Last Name"></input>
        <input class="input-element left full-length" id="email-address" placeholder="Email Address"></input>
        <input class="input-element left full-length" id="adress-line-1" placeholder="Address Line 1"></input>
        <input class="input-element left full-length" id="address-line-2" placeholder="Address Line 2"></input>
        <input class="input-element left" id="house-name" placeholder="House Name/Num"></input>
        <input class="input-element right" id="country-name" placeholder="Country"></input>
        <input class="input-element left" id="city-name" placeholder="City/State"></input>
        <input class="input-element right" id="postcode-name" placeholder="Postcode/Zipcode"></input>

        <div>
                <button class="billing-buttons" id="add-button">Add</button>
                <button class="billing-buttons" id="delete-button">Delete</button>
            </div>

    </form>

</div>



<div id="billing-form">
        <form id="shipping-form">
                <div id="shipping-title-wrapper">
                    <img src="Billing Icon.svg" id="shipping-icon"></img>
                        <h2 id="billing-title">Billing</h2>
                    </div>
            <input class="input-element left" id="first-name" placeholder="First Name"></input>
            <input class="input-element right" id="last-name" placeholder="Last Name"></input>
            <input class="input-element left full-length" id="email-address" placeholder="Email Address"></input>
            <input class="input-element left full-length" id="adress-line-1" placeholder="Address Line 1"></input>
            <input class="input-element left full-length" id="address-line-2" placeholder="Address Line 2"></input>
            <input class="input-element left" id="house-name" placeholder="House Name/Num"></input>
            <input class="input-element right" id="country-name" placeholder="Country"></input>
            <input class="input-element left" id="city-name" placeholder="City/State"></input>
            <input class="input-element right" id="postcode-name" placeholder="Postcode/Zipcode"></input>
            <input class="input-element left full-length" id="card-name" placeholder="Card Name"></input>
            <input class="input-element left full-length" id="card-number" placeholder="Card Number"></input>
            <input class="input-element left" id="exp-date" placeholder="Exp Date (MM/YY)"></input>
            <input class="input-element right" id="exp-date" placeholder="CVV"></input>







        </form>
</div>