ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS スタイル設定の問題、2 つの質問_html/css_WEB-ITnose
问题1:
如何让li适应嵌套在他里面的内容的高度...
<div style="width=100%;float:left;"> <ul id="ShowLists"> <li > <div class="tips">班级信息:</div><div class="MainInfo">终极一班</div><br /> <div class="tips">班级信息:</div><div class="MainInfo">终极一班</div><br /> <div class="tips">班级信息:</div><div class="MainInfo">终极一班</div> </li><li > <div class="tips">班级信息:</div><div class="MainInfo">终极2班</div><br /> <div class="tips">班级信息:</div><div class="MainInfo">终极2班</div><br /> <div class="tips">班级信息:</div><div class="MainInfo">终极2班</div> </li><ul>
/*列表项---该列表用于显示用户的简略信息,通常是三行*/ ul{ border-left:1px solid #BEBEBE;border-right:1px solid #BEBEBE; border-radius:10px;padding:0px; overflow:hidden; }ul li{ list-style:none;padding:0px; border-bottom:1px solid #BEBEBE; padding-top:5px; height:auto; background :url(../AppImages/right.png) no-repeat scroll right center transparent;}
li{
overflow:hidden;
}
2)写js绑定事件 touchstart 手摸上去触发 touchend 手拿开触发 在事件里面设置下class
能说下你在li中加div的目的是什么吗?
li{
overflow:hidden;
}
2)写js绑定事件 touchstart 手摸上去触发 touchend 手拿开触发 在事件里面设置下class
能说下你在li中加div的目的是什么吗?
你在div里用两个span来控制下试试 . 我用li的话右边内容也会被挤下去 , 用span解决了这类问题.
li{
overflow:hidden;
}
2)写js绑定事件 touchstart 手摸上去触发 touchend 手拿开触发 在事件里面设置下class
li{
overflow:hidden;
}
2)写js绑定事件 touchstart 手摸上去触发 touchend 手拿开触发 在事件里面设置下class
.tips{ display:block; float:left; width:97px; font-weight:bold; text-align:left; height:30px; line-height:30px; text-overflow: ellipsis; }.MainInfo{ display:block; float:left; width:70%; font-weight:normal; text-align:left;height:30px;line-height:30px; text-overflow: ellipsis; background :url(../AppImages/edit.png) no-repeat scroll right center transparent;}
我才看见 你结构不对
你里面用 0c6dc11e160d3b678d68754cc175188a干嘛
0c6dc11e160d3b678d68754cc175188a是用在 行内元素中的换行
134067c41741a0a91077a259b851c958
d7a4965c832e2caa95ae586cbb4c213c
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6484dbdf39946d73fd1a5ff1c2028fdc8班级信息:16b28748ea4df4d9c2150843fecfba6892631a409c818ac4e4b761b98c2c4d89终极一班16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6484dbdf39946d73fd1a5ff1c2028fdc8班级信息:16b28748ea4df4d9c2150843fecfba6892631a409c818ac4e4b761b98c2c4d89终极一班16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6484dbdf39946d73fd1a5ff1c2028fdc8班级信息:16b28748ea4df4d9c2150843fecfba6892631a409c818ac4e4b761b98c2c4d89终极一班16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632ebインライン要素内の改行
4394587742f9c7fae0b796a2cb1779cf
/div> ;0c500c21bbe4356c2c77966c361fb316究極クラス 116b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb class="MainInfo">究極クラス 116b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb 「>究極クラス 116b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb brは関係ない...
持ってなかったbr 前...私は 45a2772a6b6107b401db3c9b82c049c2 を使用しました。45a2772a6b6107b401db3c9b82c049c2 はインライン要素です...2 つのクラス ヒントはピクセルを使用し、MainInfo はパーセンテージを使用するため、コンピュータ画面に表示すると幅がはるかに大きくなります。だから私はbrを追加しました。 。その後、span はインラインであると考えたので、Li は非常に無効であったため、tips と MainInfo を display:block; に変更しましたが、それでも機能しないことがわかり、もう一度 div を試してみました。どちらも動作しないので、投稿して尋ねましたが、コードは変更されていません...
li の高さはコンテンツのサイズによって変わります。コードをすべて見ることができず、何が問題なのかわかりません。
デバッグ用に li、div、その他の要素に境界線を追加できます
li の高さはコンテンツのサイズに応じて変化します。コードをすべて見ることができず、何が問題なのかわかりません。
デバッグ用に li、div およびその他の要素に境界線を追加できます
おっしゃるとおり、li の高さはコンテンツのサイズに応じて変わります。$(this) をクリックしてテストします。この li (); の html はすべて正しいことがわかりました
ただし、境界線を追加すると、境界線は li で変更されないようです。後で、li の境界線を使用しませんでした。 div を試してみましたが、うまくいかないことがわかりました