<!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. linux 常用目录的作用

    . /   根目录 . /bin     命令保存目录(普通用户就可以读取的命令) . /boot   启动目录,启动相关文件 . /dev    设备文件保存目录 . /etc      配置文件保 ...

  2. Nginx之rewrite使用

    rewrite regex replacement [flag];  flag=[break/last/redirect/permanent] ² regex 是正则表达式 ² replacement ...

  3. 初次使用maven创建web工程发现只有一个idea目录，src，webapp目录都不见了，解决方案

    修bug系列2之 初次使用maven创建web项目的src目录不知所踪 窗外下着下雨,屋内的我学着maven,本以为轻轻松松,没想到还是遇到了bug.好了不说了,来看看我是怎么解决的. 在初次使用ma ...

  4. 自定义 NSLog以便发版和调试

    问题 开发中用了大量的 NSLog,但是发布时想取消这些 NSLog 开发中是否经常用过 NSLog(@"%s", __FUNCTION__); 解决问题 新建 ExtendNSL ...

  5. [LeetCode] 203. 移除链表元素(链表基本操作-删除)、876. 链表的中间结点（链表基本操作-找中间结点）

    题目 203. 移除链表元素 删除链表中等于给定值 val 的所有节点. 题解 删除结点:要注意虚拟头节点. 代码 class Solution { public ListNode removeEle ...

  6. Gradle系列之Android Gradle插件

    原文发于微信公众号 jzman-blog,欢迎关注交流. 通过前面几篇文章学习了 Gradle 基础知识以及 Gradle 插件相关的知识,关于 Gradle 及其插件相关知识请先阅读下面几篇文章: ...

  7. CentOS 7安装SeaweedFS

    1.从GitHub下载编译好的SeaweedFS 地址:https://github.com/chrislusf/seaweedfs/releases 选择linux_amd64.tar.gz的压缩包 ...

  8. JS 数组, 对象的增查改删(多语法对比)

    数据结构横向对比, 增, 查, 改, 删 建议: 在用数据结构的时候, 优先考虑Map和Set(考虑数据的唯一性), 放弃传统的数组和Object, 特别是比较复杂的数据结构时 数组 Map与Arra ...

  9. hystrix熔断器之command实现

    HystrixCommand是hystrix执行命令的具体实现,实现流程如下: 1.调用HystrixCommandExecutionHook的onStart方法 3.调用HystrixRequest ...

  10. 你还在寻找Navicat的破解版本？你应该了解开源免费的DBeaver

    前言 你是否还在各个"免费绿色"的下载网站上寻找navicat的破解版本,或者已经通过某些方式破解了navicat的特定版本.你或者是在一家对安全和软件著作权比较看重的公司,明令禁 ...