您的位置: 首页  >  IT文章  >  在一个div里面嵌套1个labal和2个div，怎么用css实现：labal和第一个div显示在一行，第2个div显示在第2行，并且和第1个div左对齐

在一个div里面嵌套1个labal和2个div，怎么用css实现：labal和第一个div显示在一行，第2个div显示在第2行，并且和第1个div左对齐

分类: IT文章 • 2022-06-01 10:36:55
在一个div里面嵌套1个labal和2个div，如何用css实现：labal和第一个div显示在一行，第2个div显示在第2行，并且和第1个div左对齐？
在一个div里面嵌套1个labal和2个div，如何用css实现下面的效果：labal和第一个div显示在一行，第2个div显示在第2行，并且第2个div和第1个div左对齐？

html代码如下：

                            <div class="big" >
                                <label class="cLabel">
                                    用户名：
                                </label>
                                <div class="cInput" >
                                    <input type="text" class="f-text" id="txtLogin" name="xlInput" value=""/>
                                </div>  
                                <div class="cTip" >
                                    <div id="divLoginTip">
                                        <span style="  color: red;  font-size: 14px;">用户姓名不能为空</span>
                                    </div>
                                </div>
                            </div>



------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

.cf:after{content:'';display:block;clear:both;}

.cf{zoom:1;}

.big{width:300px;}

.cLabel{float:left; width:100px;height:30px;line-heihgt:30px;text-align:right;}

.cInput{float:left; width:200px;height:30px;line-height:30px;text-align:left;}

.cTip{float:left;padding-left:100px;}

</style>

</head>


<body>

<div class="big cf" >

    <label class="cLabel">

        用户名：

    </label>

    <div class="cInput" >

        <input type="text" class="f-text" id="txtLogin" name="xlInput" value=""/>

    </div>  

    <div class="cTip" >

        <div id="divLoginTip">

            <span style="  color: red;  font-size: 14px;">用户姓名不能为空</span>

        </div>

    </div>

    <label class="cLabel">

        密码：

    </label>

    <div class="cInput" >

        <input type="text" class="f-text" id="txtLogin" name="xlInput" value=""/>

    </div>  

    <div class="cTip" >

        <div id="divLoginTip">

            <span style="  color: red;  font-size: 14px;">密码不能为空</span>

        </div>

    </div>

</div>

</body>

相关推荐