<!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. Spring框架学习笔记（1）

    Spring 框架学习笔记(1) 一.简介 Rod Johnson(spring之父) Spring是分层的Java SE/EE应用 full-stack(服务端的全栈)轻量级(跟EJB比)开源框架, ...

  2. C#开发PACS医学影像处理系统(二)：界面布局之菜单栏

    在菜单栏布局上,为了使用自定义窗体样式和按钮,我们需要先将窗体设置为无边框,然后添加一个Grid作为菜单栏并置顶,VerticalAlignment="Top" logo图片和标题 ...

  3. python日志模块配置

    import logging logging.basicConfig(filename= 'out.log',filemode= 'w+', level= logging.DEBUG, format= ...

  4. UI中列表

    1.ul.ol.dl

  5. 总结SUMMARY

    Summary 多线程 多线程 pthread NSThread 创建线程的方式 NSThread 的 Target 线程状态 线程属性 资源共享 原子属性 线程间通讯 GCD 同步 & 异步 ...

  6. Nginx反代MogileFS集群

    上一篇博文我们主要聊了下分布式文件系统MogileFS的组件以及部署使用,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13677279.html:今天我们主要 ...

  7. flutter实现可缩放可拖拽双击放大的图片功能

    flutter实现可缩放可拖拽双击放大的图片功能 可缩放可拖拽的功能,可实现图片或者其他widget的缩放已经拖拽并支持双击放大的功能 我们知道官方提供了双击缩放,但是不支持拖拽的功能,我们要实现向百 ...

  8. three.js学习4_光源

    Three.Light 首先展示的是使用半球光引用的效果, 光源直接放置于场景之上,光照颜色从天空光线颜色颜色渐变到地面光线颜色.光照主要有 AmbientLight 环境光 DirectionalL ...

  9. 容器云平台No.9~kubernetes日志收集系统EFK

    EFK介绍 EFK,全称Elasticsearch Fluentd Kibana ,是kubernetes中比较常用的日志收集方案,也是官方比较推荐的方案. 通过EFK,可以把集群的所有日志收集到El ...

  10. Spring Boot学习（一）初识Spring Boot

    Spring Boot 概述 Spring Boot 是所有基于 Spring 开发的项目的起点.Spring Boot 的设计是为了让你尽可能快的跑起来 Spring 应用程序并且尽可能减少你的配置 ...