`
Odysseus_110
  • 浏览: 120423 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

div 横线

阅读更多

今天写div,想用div写一条横线,但不管怎么调,div都太高了,中间空了一大块,google一下,得到答案:

“字体的大小上,每一个div都有一个默认的字体大小的,这个大小就是浏览器的默认字体大小。所以你div里不放任何东西的话,这个div的默认高度就是这个默认字体大小的高度了。所以你的css中只需要加上font-size: 1px;就可以实现你要的东西,虽然用指定字体大小的代码不如行高的实现效果和代码少好,但是从理论和道理上来讲是更正确的方向的。”

但这样在Firefox中不灵。后来用hr,但在Firefox中还是有好多问题,先把帖子记录下来,有时间再弄。

 

 

http://www.iteye.com/topic/19791

 

http://bbs.blueidea.com/thread-1677623-1-1.html

分享到:
评论

相关推荐

    tab跟随底部横线滑动

    在Web开发领域,"tab跟随底部横线滑动"是一种常见的用户界面设计,它通常用于创建一个多选项卡的交互式布局。这种设计允许用户通过点击不同的tab来切换内容,而底部的横线会动态地移动以指示当前所选的tab。这种效果...

    css实现中间文字两边横线效果

    <div>中间文字,两边横线</div> </div> ``` ```css .header { width: 400px; height: 36px; line-height: 36px; text-align: center; border: 1px solid green; position: relative; } .header div::before,...

    DIV+CSS规范命名大全集合

    - 每个单词之间通过短横线(-)连接,例如:`class="div-css"`, `id="div-css"`。 - **注意**:类名与ID名前不加任何特殊字符,如:`class="div-css5"`, `id="div-css5"`。 2. **元素标签的闭合原则**: - 每个...

    div css命名规范

    - **短横线分隔**:如果需要组合多个单词,用短横线(-)连接,如`user-list`。 10. **常见HTML元素的CSS应用**: - `div`:通用容器,用于创建块级元素或布局。 - `ul/ol`:无序/有序列表,常用于展示项目列表...

    HTML如何在两个div标签中间画一条竖线

    1. 创建一个包含两个子div的父div,为父div设置宽度、内填充和溢出隐藏。溢出隐藏(`overflow:hidden`)用于裁剪超出父div高度的内容,确保竖线的高度与最高子div一致。 ```css .maindiv { width: 900px; ...

    JavaScript实现横线提示输入验证码随输入验证码输入消失的方法

    最近做微信端的页面遇到了一个之前没有遇到过的一个页面,刚开始放在那没有去写,可是等其他页面都写好的时候,还是得回过头来研究这个页面问题,刚...--黑色横线框--> <div class=pass-box> <div class=pass-line>

    2天学会DIV+CSS最新版

    - **命名规则**:CSS选择器的命名应该简洁明了,易于理解,并遵循一定的命名规范,比如使用小写字母、短横线分隔单词等。 - **示例**:`.main-navigation`、`.content-section`等。 - **命名建议**:避免使用过于...

    DIV+CSS命名规则.docx

    在网页设计中,`DIV+CSS`是一种常见的布局方式,它将内容与表现分离,使得网页结构更加清晰,便于维护和扩展。以下是对标题、描述和标签中涉及的知识点的详细解释: 1. **DIV元素**:在HTML中,`<div>`(division)...

    (完整word版)HTML+CSS+Div测试习题.doc

    6. 在 CSS 的文本属性中,文本修饰的取值 `text-decoration: line-through` 表示横线从字中间穿过。 7. 外部式样式单文件的扩展名为 `.css`。 8. 超链接是一种一对一关系。 9. 关于文本对齐,源代码设置不正确的...

    纯css实现元素下出现横线动画(background-image)

    本文将深入探讨如何使用纯CSS来实现一个元素下方横线动画的效果,具体是通过`background-image`属性来实现。首先,我们来看一下实现这种效果的关键代码: ```html <div class='site_bar'>首页</div> ``` 这是一个...

    Div+CSS布局入门实战教程(3).pdf

    在这个例子中,TOP部分被切为两部分:LOGO和横线。LOGO由于颜色简单,选择了GIF格式,以减小文件大小并实现透明效果。而Banner部分因为细节丰富,使用JPEG格式以保持图像质量。 8. **切片与CSS的关系**:正确的切片...

    基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)

    这里面包括了一个提示信息的段落`<p>`,一个包含横线提示的`<div>`容器,以及一个用于输入验证码的绝对定位`<div>`。每个验证码数字都有一个输入框,这些输入框都用特定的类名标识,并通过`maxlength`属性限制了每个...

    29款纯DIV+CSS网站导航菜单源码分享

    6. **汉堡菜单**:对于移动设备,由于屏幕空间有限,使用汉堡图标(三横线)来隐藏和显示菜单是常见的做法。 7. **导航布局**:导航菜单可以是水平的、垂直的,甚至可以是网格或圆形布局,这些源码提供了多种可能的...

    网页制作中规范使用DIV.docx

    - 避免使用下划线`_`和短横线`-`作为CSS命名的一部分,虽然它们是允许的,但驼峰命名法或短横线分隔的命名更加常见和易于阅读。 - 使用BEM(Block Element Modifier)命名方法,有助于创建模块化的CSS,例如,一个...

    css实现文字居中两边横线效果的示例代码

    `<div>`内的文本是“css实现文字居中两边横线效果”,这就是我们要居中并添加横线的部分。 在`<head>`部分,我们定义了两个`<meta>`标签来确保页面在不同设备上正确显示,以及设定文档类型为HTML5。此外,还设置了...

    HTML-CSS-Div测试习题.docx

    * 在 CSS 中,文本修饰的取值 `text-decoration:line-through` 表示横线从字中间穿过(D)。 四、超链接 * 超链接是一种一对一的关系(A)。 * 在 HTML 中,超链接的目标属性有 `_self`、`_blank`、`_top`、`_...

    导航经典推荐的23种div+css代码

    2. **汉堡式菜单**:移动设备上常见的导航形式,图标由三条横线组成,点击后展开菜单。利用CSS的`:hover`和`:active`伪类以及`display`属性实现动画效果。 3. **下拉菜单**:在主菜单项下显示子菜单,常用于多级...

    div+css命名规则-增强SEO.doc

    - **避免使用特殊字符**:避免使用空格、下划线、连字符等特殊字符,通常用驼峰式或短横线连接单词。 2. **常见元素命名**: - `header`:页头部分,通常包含logo、顶部导航等。 - `loginBar`:登录条,用于用户...

Global site tag (gtag.js) - Google Analytics