<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<meta http-equiv="X-UA-Compatible" content="ie=edge">

		<title>Document</title>

		<style>

			.menu-list {

				display: flex;

				flex-direction: row;

				justify-content: space-between;

				width: 600px;

				flex: 1;

			}

		</style>

	</head>

	<body>

		<div class="menu-list">

			<div>猪肉大葱饺子</div>

			<hr style="border-top:1px dashed #000; height:1px;flex:1">

			<div>10元</div>

		</div>

		<div class="menu-list">

			<div>鸡蛋水饺</div>

			<hr style="border-top:1px dashed #000; height:1px;flex:1">

			<div>10元</div>

		</div>

		<div class="menu-list">

			<div>土豆丝</div>

			<hr style="border-top:1px dashed #000; height:1px;flex:1">

			<div>10元</div>

		</div>

		<div class="menu-list">

			<div>宫保鸡丁</div>

			<hr style="border-top:1px dashed #000; height:1px;flex:1">

			<div>10元</div>

		</div>

	</body>e

</html>

css实现中间横线俩边文字效果的更多相关文章

  1. 用css实现在横线中间插入文字

    在一些登录或者注册界面中常常可看到,一个大框框上面的横线中有插入文字,大概示意图如下: 这种现象其实是相对位置作用的结果,可以通过相对定位,是某元素恰好出现在div的边框上. position: re ...

  2. css文字效果（文字剪贴蒙版，text-shodow的应用，文字排版等…）

    .katex { display: inline-block; text-align: initial; } .katex { font-family: Consolas, Inconsolata, ...

  3. CSS Gradient文字效果

    你想创建的标题没有渲染和Photoshop每个标题吗?这里是一个简单的CSS技巧向您展示如何创建渐变文字效果,PNG图像(纯CSS,没有Javascript或Flash).你所需要的是一个空的< ...

  4. 精通CSS+DIV网页样式与布局--CSS文字效果

    上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定 ...

  5. css鼠标滑过出现文字效果

    模仿淘宝上鼠标移动到商品图片时,出现的文字效果. 1.效果图                                鼠标移动到粉红色的区域,则出现黄色部分. 2.代码 <!DOCTYPE ...

  6. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  7. CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果

    本文将介绍一个小技巧,通过混合模式 mix-blend-mode 巧妙的实现文字的镂空波浪效果. 起因 一日,一群友私聊问我.如何使用 CSS 实现下述效果,一个文字的波浪效果: 我当时想都没想,就回 ...

  8. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  9. CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现

    前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...

随机推荐

  1. php中的加密解密模块-mcrypt

    <?php /* 打开加密算法和模式 */ $td = mcrypt_module_open('rijndael-256', '', 'ofb', ''); /* 创建初始向量,并且检测密钥长度 ...

  2. ThreadLocal是什么？谈谈你对他的理解

    1.ThreadLocal是什么 从名字我们就可以看到ThreadLocal叫做线程变量,意思是ThreadLocal中填充的变量属于当前线程,该变量对其他线程而言是隔离的.ThreadLocal为变 ...

  3. 5 art-template

    npm 在终端命令下执行装包,就会在该目录下产生一个node_modules包 art-template地址:https://aui.github.io/art-template/zh-cn/docs ...

  4. .net core Configuration对象

    前因:最近在阅读.net core源码,发现关于Configuration介绍的文档都比较多,但是都比较杂乱,(微软文档太官方),所以写下一些自己的感想 主要通过三种使用情况来介绍 Web应用程序使用 ...

  5. pytest132个命令行参数用法

    在Shell执行pytest -h可以看到pytest的命令行参数有这10大类,共132个 序号 类别 中文名 包含命令行参数数量 1 positional arguments 形参 1 2 gene ...

  6. [LeetCode]647. 回文子串(DP)

    ###题目 给定一个字符串,你的任务是计算这个字符串中有多少个回文子串. 具有不同开始位置或结束位置的子串,即使是由相同的字符组成,也会被计为是不同的子串. 示例 1: 输入: "abc&q ...

  7. [深入理解JVM虚拟机]第3章-垃圾收集器、内存分配策略

    垃圾收集器 判断对象是否需存活 回收堆 判断对象是否存活: 方法一:引用计数法.对象被引用一次就+1,当为0时回收对象.缺点:无法解决循环引用问题. 方法二:可达性分析算法.记录当前对象是否有和GC ...

  8. .net 中的 StringBuilder 和 TextWriter 区别

    最近闲来之余,看了一些开源的类库,看到有些类库喜欢用TextWriter类来记录相关的字符串数据,感到比较好奇,为啥不用StringBuilder类对象.于是在网上搜索了一番,总结了相关笔记. Str ...

  9. 分布式系统监视zabbix讲解六之自定义监控项

    概述 Zabbix支持许多在多种情况下使用宏.宏是一个变量,由如下特殊语法标识: {MACRO} 根据在上下文中, 宏解析为一个特殊的值. 有效地使用宏可以节省时间,并使Zabbix变地更加高效. 在 ...

  10. 处理IOS浏览器在input或者textarea获取焦点后底部留一块灰色空白区域的bug

    document.body.addEventListener('focusout',function() { window.scrollTo(0,0) },false);