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

div 横线

FirefoxCSSGoogleBBS浏览器 
阅读更多

今天写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

分享到：
| opera2 来自俄罗斯的海豚
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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`：登录条，用于用户...

Magicbox
Global site tag (gtag.js) - Google Analytics