文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >所有HTML元素都不起作用(无法键入输入)，表单没有并排对齐

问所有HTML元素都不起作用(无法键入输入)，表单没有并排对齐
EN

Stack Overflow用户
提问于 2019-01-18 22:52:27
回答 3查看 64关注 0票数 0

CSS：

代码语言：javascript
复制
/* 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：

代码语言：javascript
复制
<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元素都不能正常工作，也就是说，我不能点击输入栏，也不能点击按钮。在我尝试将新表单添加到单独的页面之前，样式也完全错误，这两个表单曾经并排在一起。我知道我可能做了一些愚蠢的事情，但我花了几个小时试图修复它。

html
css
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-01-18 23:05:31

代码语言：javascript
复制
<div id="shipping-section"></div>

因为shipping-section在这里是关闭的，并且没有在表单中指定width属性，所以它假定为100%宽度。试着把你的发货单包装在发货区的集装箱里。

您的窗体不会因为宽度和页边距而并排浮动。

并且输入的文本颜色是黑色，这意味着在输入字段背景下看不到它。试着把它改成白色

请参阅下面的工作代码

代码语言：javascript
复制
<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
EN

Stack Overflow用户

发布于 2019-01-18 23:01:18

您是否会对无法单击和无法查看输入的数据感到困惑

您的输入域的背景非常暗

将input-element类更改为

代码语言：javascript
复制
   .input-element{
      background-color: #0C0C0D !important;
      height: 30px;
      width: 200px;
      margin-bottom: 20px;
      border: none;
      padding: 15px;
      z-index: 1;
      color: white;
    }

我添加了颜色:白色到底部

票数 0
EN

Stack Overflow用户

发布于 2019-01-18 23:06:34

我把你的代码放到了jsfiddle http://jsfiddle.net/taz8vhoc/中。

一旦添加了

代码语言：javascript
复制
color: white;

它工作得很好

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/54256388

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档