課程
/前端開發
/HTML/CSS
/六個案例學會響應式布局
姓名哪里寬度應用不上去
2023-03-16
源自：六個案例學會響應式布局 3-8
正在回答
<!DOCTYPE html>
<html lang="zh-CN">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? #form div{
? ? ? ? ? ? display: flex;
? ? ? ? ? ? /* height: 30px; */
? ? ? ? ? ? align-items: flex-start;
? ? ? ? ? ? flex: 0 0 30px;
? ? ? ? }
? ? ? ? #form div label{
? ? ? ? ? ? flex: 0 0 100px;
? ? ? ? ? ? text-align: right;
? ? ? ? #form{
? ? ? ? ? ? flex-direction: column;
? ? </style>
</head>
<body>
? ? <form>
? ? ? ? <div id="form">
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <label>姓名:</label>
? ? ? ? ? ? ? ? <input type="text">
? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <label>請輸入密碼:</label>
? ? ? ? </div>
? ? </form>
</body>
</html>
舉報
flex與媒體查詢實現響應式和flex+rem實現彈性布局
1 回答當子元素寬度超出父元素寬度的時候，此時沒有剩余空間，flex-grow屬性是否失效？可以這樣理解嗎
1 回答li 直接放在 div 里？
1 回答最后面那排的應該也是從左往右排呢。不能在中間呀？這個如何處理。
5 回答為什么輸入text-align之后沒有對齊？
2 回答flex-basis沒有設置，flex-grow可以直接設置嗎
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2024-12-11
<!DOCTYPE html>
<html lang="zh-CN">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? #form div{
? ? ? ? ? ? display: flex;
? ? ? ? ? ? /* height: 30px; */
? ? ? ? ? ? align-items: flex-start;
? ? ? ? ? ? flex: 0 0 30px;
? ? ? ? }
? ? ? ? #form div label{
? ? ? ? ? ? flex: 0 0 100px;
? ? ? ? ? ? text-align: right;
? ? ? ? }
? ? ? ? #form{
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-direction: column;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <form>
? ? ? ? <div id="form">
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <label>姓名:</label>
? ? ? ? ? ? ? ? <input type="text">
? ? ? ? ? ? </div>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <label>請輸入密碼:</label>
? ? ? ? ? ? ? ? <input type="text">
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </form>
</body>
</html>