課程
/前端開發(fā)
/HTML/CSS
/六個案例學會響應(yīng)式布局
姓名哪里寬度應(yīng)用不上去
2023-03-16
源自:六個案例學會響應(yīng)式布局 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與媒體查詢實現(xiàn)響應(yīng)式和flex+rem實現(xiàn)彈性布局
1 回答當子元素寬度超出父元素寬度的時候,此時沒有剩余空間,flex-grow屬性是否失效?可以這樣理解嗎
1 回答li 直接放在 div 里?
1 回答最后面那排的應(yīng)該也是從左往右排呢。不能在中間呀?這個如何處理。
5 回答為什么輸入text-align之后沒有對齊?
2 回答flex-basis沒有設(shè)置,flex-grow可以直接設(shè)置嗎
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學習伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
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>