ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS スタイル設定の問題、2 つの質問_html/css_WEB-ITnose

CSS スタイル設定の問題、2 つの質問_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:56:23
オリジナル
1013 人が閲覧しました

问题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>
ログイン後にコピー

里面的,li貌似是固定的,不会随着嵌套的div而改变...
下面是我的样式
/*列表项---该列表用于显示用户的简略信息,通常是三行*/    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得底边框,它高度固定了...
Li的高度不能固定,因为你不知道动态读出来的玩意有多少行...

问题二:div点击高亮效果怎么做,是针对手机web的,当触碰的时候高亮,手指离开的时候恢复...有插件?


回复讨论(解决方案)

li{
overflow:hidden;
}



2)写js绑定事件 touchstart 手摸上去触发 touchend 手拿开触发 在事件里面设置下class

能说下你在li中加div的目的是什么吗?

li{
overflow:hidden;
}



2)写js绑定事件 touchstart 手摸上去触发 touchend 手拿开触发 在事件里面设置下class



overflow:hidden;溢出的东西就隐藏了

能说下你在li中加div的目的是什么吗?



不用div 用 span也是一样的,li都不会自动适应

不管用div 或者span 我只是在给字体加个样式而已 前面的div 字体是粗体....后面的div 点击高亮,带图片,有的带颜色,,,

你在div里用两个span来控制下试试 . 我用li的话右边内容也会被挤下去 , 用span解决了这类问题.


li{
overflow:hidden;
}



2)写js绑定事件 touchstart 手摸上去触发 touchend 手拿开触发 在事件里面设置下class



overflow:hidden;溢出的东西就隐藏了



li里面div的样式写出来看看



li{
overflow:hidden;
}



2)写js绑定事件 touchstart 手摸上去触发 touchend 手拿开触发 在事件里面设置下class



overflow:hidden;溢出的东西就隐藏了



li里面div的样式写出来看看




.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;}
ログイン後にコピー

我才看见 你结构不对
你里面用 
干嘛

是用在 行内元素中的换行 


        

  •           

                     
    • 班级信息:
      终极一班

    •               
    • 班级信息:
      终极一班

    •              
    • 班级信息:
      终极一班
    • インライン要素内の改行

        /div> ;
        究極クラス 1
        class="MainInfo">究極クラス 1
「>究極クラス 1
brは関係ない...
持ってなかったbr 前...私は を使用しました。 はインライン要素です...2 つのクラス ヒントはピクセルを使用し、MainInfo はパーセンテージを使用するため、コンピュータ画面に表示すると幅がはるかに大きくなります。だから私はbrを追加しました。 。その後、span はインラインであると考えたので、Li は非常に無効であったため、tips と MainInfo を display:block; に変更しましたが、それでも機能しないことがわかり、もう一度 div を試してみました。どちらも動作しないので、投稿して尋ねましたが、コードは変更されていません...

今では br なしでは不可能です

li の高さはコンテンツのサイズによって変わります。コードをすべて見ることができず、何が問題なのかわかりません。
デバッグ用に li、div、その他の要素に境界線を追加できます


li の高さはコンテンツのサイズに応じて変化します。コードをすべて見ることができず、何が問題なのかわかりません。
デバッグ用に li、div およびその他の要素に境界線を追加できます


おっしゃるとおり、li の高さはコンテンツのサイズに応じて変わります。$(this) をクリックしてテストします。この li (); の html はすべて正しいことがわかりました

ただし、境界線を追加すると、境界線は li で変更されないようです。後で、li の境界線を使用しませんでした。 div を試してみましたが、うまくいかないことがわかりました

今、私はテーブルに切り替えました、本当にスピーチレス
ソース:php.cn
前の記事:CSS レイアウト_html/css_WEB-ITnose 次の記事:Canvas 入門 (3): 画像処理と描画 Text_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート