<!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. 编程体系结构(02)：Java异常体系

    本文源码:GitHub·点这里 || GitEE·点这里 一.异常简介 优秀的程序代码,都在追求高效,安全,和低错误率,但是程序中的异常是无法避免的,降低异常出现的频率是关键,异常出现如何处理是另一个 ...

  2. vueRooter的总结

    这一周学习了Vue的脚手架的结构,最重要的router 该进行总结和回忆了. 1首先是router的安装,用npm命令npm install vue-router --save 2装完后,在main. ...

  3. node中间件

    npm i body-parser post 请求主题中间件 const bodyParser = require('body-parser')   const bodyParser = requir ...

  4. Asp.Net中的三种分页方式总结

    本人ASP.net初学,网上找了一些分页的资料,看到这篇文章,没看到作者在名字,我转了你的文章,只为我可以用的时候方便查看,2010的文章了,不知道这技术是否过期. 以下才是正文 通常分页有3种方法, ...

  5. fake_useragent.errors.FakeUserAgentError: Maximum amount of retries reached解决方法！

    UserAgent 就是用户代理,又叫报头,是一串字符串,相当于浏览器的身份证号,在利用爬虫爬取网站数据时,频繁更换它可以避免触发相应的反爬机制. fake-useragent对频繁更换UserAge ...

  6. 15个随机图片API

    15个随机图片API 妈妈再也不用担心我网站没图用了呜 请不要重复刷新此页面 ! 找了很久的说,你难道不想收藏一下吗 其中有些 API 速度并不太好,可能会拖慢贵站的速度 我也不能保证这些 API 能 ...

  7. UI中table写表格

  8. mariadb 4

    连接查询,视图,事物,索引,外键(第四章)   连接查询 --创建学生表 create table students ( id int unsigned not null auto_increment ...

  9. 数据库SQL调优的几种方式

    1.创建索引 (1) 要尽量避免全表扫描,首先应考虑在where 及order by涉及的列上建立索引 (2) 在经常需要进行检索的字段上创建索引,一个表中的索引最好不要超过6个 2.避免在索引上使用 ...

  10. ant在windows环境下安装

    前言: Apache Ant,是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于 Java 环境中的软件开发. 举个例子说明:平时在写 Java 程序的时候,基本的步骤都是 打 ...