小技巧处理div内容溢出_CSS/HTML

前几天遇到一个问题,代码是这样一个层次:

复制代码 代码如下:

<div class="province">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

我设置了div的边框,

要想ul的内容在边框内,

必须设置div高度。

但是,ul内的内容是变化的,内容少的时候就不及div的高度。

不设高度的时候,ul的内容就出现在边框外了。

原来需要设置ul的边框。想想也是,先设置与他关系最近的元素吧。

对于前端不是很专业的同僚来说,写css样式表还是有个规则比较好:

指定css样式要有层次:如上例,定义li的样式 .province ul li{...}

写样式有个大致顺序:容器大小(width,height......),容器位置(left,margin......),容器文本(color......),其他

这样尽可能避免样式覆盖之类的问题。

时间: 2024-08-01 22:39:08

小技巧处理div内容溢出_CSS/HTML的相关文章

优化的小技巧与网站内容选择

新手站长,做站前一定要明确自己的站点主题是什么,即要清楚自己的站大方向是什么.还是一句老话,新站起步,别好高骛远!别想着一步登天,做综合类站要走的路是很艰难的,做为新入行的,还是先学爬再学走路,走的稳了才能更好更快地跑~ 明确了目标后,要为自己的站选择关键字了,了解下自己的同行有哪些是比较成功比较出名的,了解它们的关键字,尽量让关键字贴切但又不跟别人重复,这样才更容易成功地排在搜索引擎的前列.了解同行的另一目的,就是可以及时地获取到自己需要的内容,自己的能力毕竟有限,别人成功的内容为什么不拿来为

window.open的小技巧分享(转)

   今天再次谈起window.open是因为发现了一个比较好玩的小技巧,详细内容我们稍后详细说明.       聊到window.open,不得不说明一下他的使用方法,主要有两种形式:   window.open()没有任何参数,这种方式可以新标签打开页面 window.open(url, name, pars),带有参数的可以在当前页面打开窗口       详细的使用方法,之前有过介绍,如果想了解,可以点击这里.       知道了如何使用,接下来介绍几个特别的属性和方法(下面所说到的都是同

注释PHP和html混合代码的小技巧(分享)_php实例

我们在写php的时候有时候会遇到想要注释一部分的代码,是由html和PHP混合组成的,这时候如果一行一行去分开注释有点麻烦.但是又不敢删掉,这时候我们可以充分利用if语句去进行注释的功能 <?php if (1==2):?> //代码片段 <?php endif;?> 以上就是小编为大家带来的注释PHP和html混合代码的小技巧(分享)全部内容了,希望大家多多支持~ 以上是小编为您精心准备的的内容,在的博客.问答.公众号.人物.课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进

注释PHP和html混合代码的小技巧(分享)

我们在写php的时候有时候会遇到想要注释一部分的代码,是由html和PHP混合组成的,这时候如果一行一行去分开注释有点麻烦.但是又不敢删掉,这时候我们可以充分利用if语句去进行注释的功能 <?php if (1==2):?> //代码片段 <?php endif;?> 以上就是小编为大家带来的注释PHP和html混合代码的小技巧(分享)全部内容了,希望大家多多支持脚本之家~

div中的内容溢出后如何以省略号结尾

方法一 样式: html代码 <div id="intro_info" class="right_right_bottom_middle_bottom_top"> </div> <div class="right_right_bottom_middle_bottom_bottom"> <a href="__URL__/com_intro_content?menu_id=10" targ

div css表单布局的五个小技巧

核心提示:div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意. div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意. 1.表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加入 代码到 <textarea> 中,一切就会变得简单多了,如: <textarea name=textarea wrap=virtual rows=2 cols=22 >Input Englis

css 样式 ,给div设置了最小高度 当内容溢出最小高度时 之前给容器div设置的样式没作用

问题描述 css 样式 ,给div设置了最小高度 当内容溢出最小高度时 之前给容器div设置的样式没作用 解决方案 DIV设置最小高度DIV设置最小高度为什么我的设置的div最小高度不对 解决方案二: 不懂你要问什么东东,代码也没有.. 解决方案三: 你用浏览器调式调式呢 解决方案四: 你用的是谷歌调试吗?

内容营销的13个小技巧

摘要: 你还记得,以往的营销是如何吸引你的注意力吗用浓烈的色彩.朗朗上口的押韵.漂亮的模特,或者如果这些都不管用的话,直接竖个巨大的广告牌.不过,为了与顾客建立有效的联系 你还记得,以往的营销是如何吸引你的注意力吗--用浓烈的色彩.朗朗上口的押韵.漂亮的模特,或者如果这些都不管用的话,直接竖个巨大的广告牌.不过,为了与顾客建立有效的联系,企业正逐渐放弃这些方法.弹出式广告.噱头广告渐渐被定制化的内容所取代,顾客更愿意分享这些对他们用处的定制内容.每当提及企业使用哪些渠道向顾客传话,常见的回答就是

用DIV CSS设计网页时的八个必要的小技巧

css|技巧|设计|网页 以下是进行CSS设计时的八个必要的小技巧,良好的习惯可能会使你的设计周期加倍缩短.(如果您想了解更多请参见人民邮电出版社后续图书<CSS精粹--101条设计技巧>) 1.若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题.W3C对于XHTML与CSS都有检测工具可用,请见http://validator.w3.org 请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误:我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减