第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定

為什么<li>設(shè)置了display：inline可以自動換行？

?如果<li>什么都不設(shè)置，那<li>是單獨占一行，感覺是行內(nèi)元素。

行內(nèi)元素如果遇到父元素的邊框，應該是不會自動換行的。

在此例子中老師只是把<li>設(shè)置為display：inline，<li>就自動換行了。

感覺這個情況跟行內(nèi)元素的性質(zhì)沖突了，不太理解請高手解答，謝謝！

補充一下代碼：其實就是按照視頻里面老師代碼敲的。

css文件：

*{ margin:0px; padding:0px;}
body{ font-size:12px; line-height:1.7;}
li{list-style:none;}
#content{width:800px; margin:0 auto; padding:20px ;}
#content h1{ color:#0088bb;}
#content? .item{ padding:20px; margin-bottom:20px; border:2px dotted #0088bb;}
#content? .item h2{
?border:2px solid #0088bb; font-size:16px; font-weight:#0088bb;
?margin-button:10px;}
#content .item li{ ?display:inline;? margin-right:10px; ?}
#content .item li a img{ width:230px; height:230px; border:none; }
#menu{ width:80px; position:fixed; top:100px;
???????????? left:50%; margin-left:400px; }


HTML文件：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地狗購物網(wǎng)-網(wǎng)頁定位導航效果</title>
<link href="css/sp1css.css" type="text/css" rel="stylesheet"/>
</head>
???????
<body>?????
??<div id="menu">
?????????? ??<ul>
?????????????? ??<li><a href="#">1F 男裝</a></li>
??????????????????? <li><a href="#">2F 女裝</a></li>
??????????????????? <li><a href="#">3F 美妝</a></li>
??????????????????? <li><a href="#">4F 數(shù)碼</a></li>
??????????????????? <li><a href="#">5F 母嬰</a></li>
?????????????? </ul>
??????? </div>
??????? <div id="content">
??????? ??<h1>地狗購物網(wǎng)</h1>??
???????????????? <div id="item1" class="item">
?????????? ?? ??<h2>1F 男裝</h2>
??????????????????????? <ul>
??????????????????????? ??<li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????? </ul>
???????????????? </div>
???????????????? <div id="item2" class="item">
?????????? ?? ??<h2>2F 女裝</h2>
??????????????????????? <ul>
??????????????????????? ??<li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????? </ul>
???????????????? </div>
???????????????? <div id="item3" class="item">
?????????? ?? ??<h2>3F 美裝</h2>
??????????????????????? <ul>
??????????????????????? ??<li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????? </ul>
???????????????? </div>
???????????????? <div id="item4" class="item">
?????????? ?? ??<h2>4F 數(shù)碼</h2>
??????????????????????? <ul>
??????????????????????? ??<li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????? </ul>
???????????????? </div>
???????????????? <div id="item5" class="item">
?????????? ?? ??<h2>5F 母嬰</h2>
??????????????????????? <ul>
??????????????????????? ??<li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????? </ul>
???????????????? </div>
???????? </div>
</body>?

正在回答

3 回答

給一下完整代碼

0 回復 有任何疑惑可以回復我~
#1

edward12 提問者

已經(jīng)補充代碼,麻煩您看一下，謝謝。
2015-11-20 回復 有任何疑惑可以回復我~
#2

edward12 提問者

非常感謝您的回答
2015-11-20 回復 有任何疑惑可以回復我~

li 默認的?? ?display:?list-item; ? ?這個應該和block 差不多，是獨占一行的。也可以設(shè)置寬高。所以不會換行。你改成了display:inline-block; 會就不會獨占一行了，但是還是可以設(shè)置寬和高。

0 回復 有任何疑惑可以回復我~
#1

edward12 提問者

謝謝您的回答，我在DW上重新試過，上述代碼無論<li>設(shè)為inline 或是 inline-block，效果都是一樣的 其實我想問的是：當行內(nèi)元素排列長度超過父元素時，到底會不會換行？ 因為我是初學，向來對行內(nèi)元素的理解是無論怎樣行內(nèi)元素都應該留在一行內(nèi)。 在上述代碼中的情況就是id=content的div的寬度是800px 每一張圖寬度為230px； 每一行當排到第四幅時位置不夠了。按照我自己的理解，圖片應該是打橫溢出，也就是不換行。 但事實上圖片沒有溢出content div，而是換行了。可能我對行內(nèi)元素的理解不太正確。 請問您對此有何看法？謝謝！
2015-11-20 回復 有任何疑惑可以回復我~
#2

李曉健 回復 edward12 提問者

inline 和 inline-block 超過父元素會換行的。 行內(nèi)元素不是留在一行內(nèi)，而是他的寬度和高度是由內(nèi)容撐起來，設(shè)置寬度和高度是無效的。
2015-11-20 回復 有任何疑惑可以回復我~

補充一下代碼：其實就是按照視頻里面老師代碼敲的。

css文件：

*{ margin:0px; padding:0px;}
body{ font-size:12px; line-height:1.7;}
li{list-style:none;}
#content{width:800px; margin:0 auto; padding:20px ;}
#content h1{ color:#0088bb;}
#content? .item{ padding:20px; margin-bottom:20px; border:2px dotted #0088bb;}
#content? .item h2{
?border:2px solid #0088bb; font-size:16px; font-weight:#0088bb;
?margin-button:10px;}
#content .item li{ ?display:inline-block;? margin-right:10px; ?}
#content .item li a img{ width:230px; height:230px; border:none; }
#menu{ width:80px; position:fixed; top:100px;
???????????? left:50%; margin-left:400px; }


HTML文件：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地狗購物網(wǎng)-網(wǎng)頁定位導航效果</title>
<link href="css/sp1css.css" type="text/css" rel="stylesheet"/>
</head>
???????
<body>?????
??<div id="menu">
?????????? ??<ul>
?????????????? ??<li><a href="#">1F 男裝</a></li>
??????????????????? <li><a href="#">2F 女裝</a></li>
??????????????????? <li><a href="#">3F 美妝</a></li>
??????????????????? <li><a href="#">4F 數(shù)碼</a></li>
??????????????????? <li><a href="#">5F 母嬰</a></li>
?????????????? </ul>
??????? </div>
??????? <div id="content">
??????? ??<h1>地狗購物網(wǎng)</h1>??
???????????????? <div id="item1" class="item">
?????????? ?? ??<h2>1F 男裝</h2>
??????????????????????? <ul>
??????????????????????? ??<li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????? </ul>
???????????????? </div>
???????????????? <div id="item2" class="item">
?????????? ?? ??<h2>2F 女裝</h2>
??????????????????????? <ul>
??????????????????????? ??<li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????? </ul>
???????????????? </div>
???????????????? <div id="item3" class="item">
?????????? ?? ??<h2>3F 美裝</h2>
??????????????????????? <ul>
??????????????????????? ??<li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????? </ul>
???????????????? </div>
???????????????? <div id="item4" class="item">
?????????? ?? ??<h2>4F 數(shù)碼</h2>
??????????????????????? <ul>
??????????????????????? ??<li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????? </ul>
???????????????? </div>
???????????????? <div id="item5" class="item">
?????????? ?? ??<h2>5F 母嬰</h2>
??????????????????????? <ul>
??????????????????????? ??<li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????? </ul>
???????????????? </div>
???????? </div>
</body>


0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

為什么<li>設(shè)置了display：inline可以自動換行？

我要回答 關(guān)注問題
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號