两个input框不能对齐,该怎么解决?

心悦琴
  • 67

image.png
如图所示,姓名和手机号的输入框无法对齐,请问该如何解决,请指教。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>注册页满意度调查</title>
    <link type="text/css" rel="stylesheet" href="css\JDsurvey.css">
</head>
<body>
    <div id="inner-content">
        <div id="header">
            <div id="header-top">
               
                <h1>注册页满意度调查</h1>
            </div>
            
            <div id="header-bottom">    
                <p>
                    尊敬用户您好:
                    <br>
                    为了给您提供更加完善的服务,我们希望收集并了解您在页面的使用情况。对您的配合和支持表示衷心的感谢!
                </p>
            </div>
        </div>

        <div id="content">
           
            <div class="A">       
                <span class="A">A</span>
                <br> <br>

                <form action="" method="POST">
                    <div>

                        <label  class="questiontext">
                            <span class="asterisk">
                                *
                            </span>
                            您对注册页整体满意度如何?
                        </label>
                    </div>    

                    <div class="selection">
                            <ul>
                                <li>
                                    <input type="radio" name="satisfaction" id="verycontent">
                                    <label for=""> 非常满意</label>
                                </li>
                               <li>
                                    <input type="radio" name="satisfaction" id="content">
                                    <label for=""> 满意</label>
                                </li>

                                <li>
                                    <input type="radio" name="satisfaction" id="general">
                                    <label for=""> 一般</label>
                                    
                                </li>
                               
                                <li>
                                    <input type="radio" name="satisfaction" id="notcontent">
                                    <label for=""> 不满意</label>
                                </li>
                                
                                <li>
                                    <input type="radio" name="satisfaction" id="verynotcontent">
                                    <label for=""> 非常不满意</label>
                                
                                </li>
                            </ul>                 
                        </div>
                   
                </form>


                <form action="" method="POST">

                    <div>
                        <label for="" class="questiontext">
                            <span class="asterisk">
                                *
                            </span>
                            您对注册页有什么想法,请大声说出来吧!(例如:哪里有问题,哪些功能做得不够好等)
                        </label>
                    </div>   
                    

                    <div class="selection">
                        <p class="text">
                            <textarea name="comment" id="comment" rows="5" cols="40"></textarea>
                        </p>
                       
                    </div>
                </form>
            </div>

            <div class="user_information">   
                <br>    
                <span class="user_information">用户信息搜集</span>
                <br> <br>

                <form action="" method="POST">
                    <div>
                        <div class="questiontext">
                            我们会不定期邀请用户参与面对面的交流。如果您有意参与,请填写如下信息,方便我们与您联系,谢谢!(信息仅作为内部资料绝不外泄)
                            <br>
                            如果您对京东的使用体验有任何想法,也欢迎加入我们的<span class="keywords">京东体验交流QQ群(389453258)</span>,输入验证码<span class="keywords"> jdued</span> 即可成为群内一员!我们也会在群内发布访谈邀请的信息哦!
                            <br><br>
                        </div>
                    </div>

                    <div class="selection">
                        <ul>
                            <li>
                                <!-- <div class="name">姓名</div> -->
                                <label for="" class="name"> 姓名</label>

                                <span class="input_block">
                                    <!-- wwfdw -->
                                    <input type="text" name="name" id="name">
                                </span>
                               
                                
                            </li>
                           <li>
                                <label for="" class="phone"> 手机号</label>

                                <span class="input_block">
                                    <input type="text" name="phone" id="phone">
                                </span>

                               
                            </li>

                        </ul>                 
                    </div>
               



                    
                   
                </form>

            </div>



        </div>
    </div>


 
</body>
</html>
body{
    font-size: 12px;
    line-height: 120%;
    margin: 8px;
}


div#inner-content{
    border-spacing: 1px;
    margin: 20px auto 40px auto;
    width: 75%;
}



div#header{
    margin: 0 auto;
    width: 100%;
    padding-top: 1px;
}

div#header-top{
    border-bottom: 2px solid #e33b3d;
    padding-bottom:10px;
    color: #666;
    text-align: center;
    height: 43px;
    overflow: hidden;
    background: url(../img/logo-w-s.png) no-repeat 0 -10px;
    background-size: 165px auto;
    /* margin: 0;
    padding: 0; */
}

div#header-top h1{
    text-align: left;
    margin-left: 190px;
    font-size: 22px;
    font-family: "Microsoft Yahei";
    font-weight: normal;
    padding-bottom: 10px;
    line-height: 26px;
}


div#header-bottom{
    text-align: left;
    padding: 30px 65px 15px 35px;
    line-height: 25px;
}

div#header-bottom p{
    margin:0px;
}





form{
    display: table;
    width: 100%;
    margin: 0 auto 10px auto;
    border: 1px solid #cce8ff;
    padding: 1px;
    background-color: #FFFFFF;
    border-spacing: 0;
}


form div{
    display:table-row;
}

form p{
    display: table-cell;
}


div.A span.A,div.user_information span.user_information{
    font-size: 16px;
  
    font-weight: bold;
    text-align: left;
    
    
}





label.questiontext{
    display:table-cell;
    font-family: verdana;
    font-size: 12px;
    font-weight: bold;
    background-color: #EEF6FF;
    text-align: left;
    padding: 6px 10px;
    margin: 0;
}


span.asterisk{
    color: red;
    font-size: 9px;
    font-family: verdana;
    margin-right: 5px;
}


div.selection{
    display: table-cell;
    padding: 11px 24px 16px 37px;
    text-align: left;
}

ul,li{
    list-style: none;
    margin-left: 0%;
    padding-left: 0%;
}

li{
    text-align: left;
    margin: 0% 0% 0.5em 0.5em;
}

input{
    margin: 0;
    padding: 0;

}

p.text{
    margin: 0;
    padding: 0;
    margin-top: 10px;
    margin-bottom: 10px;
}


textarea#comment{

    padding: 0;
    margin-left: 1em;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
}


div.questiontext{
    display:table-cell;
    font-family: verdana;
    font-size: 12px;
  
    background-color: #EEF6FF;
    text-align: left;
    padding: 6px 10px;
    margin: 0;
}


span.keywords{
    color: rgb(178,34,34);
}

label.name,label.phone{
    display: table-cell;
    padding: 0.3em 1em 0% 0%;
}


span.input_block{
    padding: 0.3em 0% 0% 1em;
    display: table-cell;
    vertical-align: baseline;
    white-space: nowrap;
}

静候答复为盼。

回复
阅读 1.1k
3 个回答
✓ 已被采纳

大哥,咋又是你,你还老用 table 布局,时代变了。别用 table 布局了,怪难受的。

你想 table 布局,你得改。

image.png

image.png

或者你就按楼上大哥的方案,当然你的label得先设置一个 inline-block 之类的东西,默认类型(inline)是不行的。

lilabel给个定宽就行,label文字右对齐,input撑开剩下的宽度即可

最简单的办法,把label设定一样的宽度

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏