<div style="border: black 1px solid;width: 300px;height: 900px;display: inline-block"> <p>功能1</p> <p>功能1</p> <p>功能1</p> <p>功能1</p> </div> <!--功能显示框--> <div style="border: black 1px solid;width: 800px;height: 900px;display: inline-block;">第三部分</div>为什么这两个div框不在同一行
时间: 2023-11-16 20:54:44 浏览: 131
这两个div框不在同一行的原因是因为它们的总宽度已经超过了父容器的宽度。第一个div的宽度是300px,第二个div的宽度是800px,加起来超过了父容器的宽度,导致第二个div被强制换行,无法与第一个div在同一行显示。要想让它们在同一行显示,可以减小它们的宽度,或者给它们的父容器增加足够的宽度,使它们的总宽度不超过父容器的宽度。
相关问题
<!--页头文件--> <div style="border: black 1px solid;width: 1200px;height: 80px">会议控制中心</div> <!--功能列表--> <div style="border: black 1px solid;width: 300px;height: 900px;display: inline-block"> <p>功能1</p> <p>功能1</p> <p>功能1</p> <p>功能1</p> </div> <!--功能显示框--> <div style="border: black 1px solid;width: 800px;height: 900px;display: inline-block;">第三部分</div>为什么后两个div框不能显示在同一行内
后两个div框不能显示在同一行内的原因是因为它们的总宽度已经超过了父容器的宽度,导致第二个div被强制换行,无法与第一个div在同一行显示。第一个div的宽度是1200px,第二个div的宽度是300px,第三个div的宽度是800px,它们的总宽度为1200px+300px+800px=2300px,超过了父容器的宽度,所以第二个div被强制换行。要想让它们在同一行显示,可以减小它们的宽度,或者给它们的父容器增加足够的宽度,使它们的总宽度不超过父容器的宽度。
.input-group { margin-bottom: 10px; } .input-group label { display: block; margin-bottom: 5px; } .input-group input { width: 100px; padding: 5px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } .input-group select { width: 100px; padding: 5px; border: 1px solid #B0E0E6; border-radius: 4px; box-sizing: border-box; } .login-btn { width: 100%; height: 10px; background-color: #aaffaa; color: #fff; padding: 30px 25px; border-radius: 4px; cursor: pointer; float: right; box-sizing: border-box; } .container div input:focus { background-color: #ffe4e1; } .login-btn:hover { background-color: #45a049; } </style> <script> function showAdminInput() { var userType = document.getElementById("user-type").value; if (userType == "admin") { document.getElementById("username-label").innerHTML = "管理员用户名:"; } else { document.getElementById("username-label").innerHTML = "请输入用户名:"; } } function login() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; var userType = document.getElementById("user-type").value; } </script> </head> <body style="background-image: url(image/bk8.gif); background-size: cover; background-repeat: no-repeat;color: pink;"> <div class="container" > <h1 style="font-size: 40px; text-align: center; text-color: #B0E0E6">Login</h1> <div class="input-group" > <label id="username-label">请输入用户名:</label> <input type="text" id="username" name="username" style="border-bottom: 1px solid black;padding-bottom: 2px;display:inline-block;"> </div> <div class="input-group" > <label>请你输入密码:</label> <input type="password" id="password" name="password" style="border-bottom: 1px solid black;padding-bottom: 2px;display:inline-block;"> </div> <div class="input-group" > <label>选择用户类型:</label> <select id="user-type" name="user-type" onchange="showAdminInput()" style="color: blue;"> <option value="normal">普通用户</option> <option value="admin">管理员</option> </select> </div> <button class="login-btn" onclick="login()" >GO</button> </div>为什么标签和输入框不能在同一行
标签和输入框不能在同一行是因为它们都被包含在一个class为“input-group”的div元素中,而该div元素默认的display属性是block,即块级元素,会自动换行。如果想让它们在同一行,可以将该div元素的display属性设置为inline-block或者使用CSS的flexbox布局。例如可以在.input-group样式中添加"display: inline-block;"。
阅读全文