所有HTML元素均不起作用（无法输入），表单未并排对齐

时间：2019-01-18 14:52:27

标签： html css

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元素均无法正常运行，即我无法单击输入字段，也无法单击按钮。在尝试将新表单添加到单独的页面之前，样式还完全错了，这两种表单并排放置。我知道我可能做过一些愚蠢的事情，但是花了数小时试图修复它。

3 个答案:

答案 0 :(得分：1)

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

由于此处的运输部分已关闭，并且您的表单中未指定width属性，因此假设宽度为100％。尝试将运输表格包装在运输部分的容器中。

由于其宽度和边距，您的表单并非并排浮动。

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

有关工作代码，请参见下文

<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>

答案 1 :(得分：0)

您可能会因为无法点击和无法看到输入的数据而感到困惑

您输入字段的背景非常暗

将输入元素类更改为

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

我在底部添加了颜色：白色

答案 2 :(得分：0)

我将您的代码放入jsfiddle中 http://jsfiddle.net/taz8vhoc/

一旦添加

color: white;

它很好用

相关问题
最新问题