菜单制作:ul li横向排列
CSS菜单制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单</title>
<style type="text/css">
.ui {
width: 1200px;
height: 100px;
list-style: none;
margin: 0;
padding: 0;
} .ui li {
width: 200px;
margin: 0 10px;
float: left; /*该处换为display:inline-block;同样效果*/ } .ui li a {
width: 70px;
height: 50px;
padding: 0 20px;
font-size: 12px;
line-height: 50px;
border: solid 1px;
{#background: red;#}
display: inline-block;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="ui">
<li><a href="#">首页</a></li>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">服务大厅</a></li>
<li><a href="#">需求大厅</a></li>
</ul>
</body>
</html>
菜单制作CSS
菜单制作:ul li横向排列的更多相关文章
- ul li横向排列及圆点处理
如何用CSS制作横向菜单 让ul li横向排列及圆点处理 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...
- CSS + ul li 横向排列的两种方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css ul li 横向排列
因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...
- 无序列表li横向排列的间隙问题
今天在写页面的时候,无意中遇到这样一个问题,就是无序列表li横向排列即做成导航栏时,列表项间有间隙. 如: 将列表项li变成列表块后(即将li标签设置为,display:inline-block后), ...
- 解决ul的li横向排列换行的问题
1. 问题现象 先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...
- 无序列表li横向排列
一.横向两列方式排列: 在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得li的css样式设置为:float:left的形式即可,li会依次从最左边开始并列对齐, 例如: HTML中 ...
- CSS中如何将li横向排列
直接贴段例子代码吧: @{ Layout = null;} <!DOCTYPE html><style type="text/css"> .test li ...
- ul li设置横排,并除去li前的圆点
效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...
- UL/LI
如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul><li><a href="1&quo ...
随机推荐
- WIFI Pineapple 排雷
1.在WEB界面中无法安装插件 解决:进入SSH,执行opkg update 2.ettercap无法运行,缺少动态连接库,libpcap.so.1.3 创建软连接 ln -s /usr/lib/ ...
- H5_0024:对于事先无法确定css大小的情况,可以通过JS动态修改
$(function(){ function Heights(){ var WinH = $(window).height(); ...
- MY_0001:添加命令到自定义工具栏
1,按住 ctrl + shift 2,点击命令即可
- sublime修改快捷键样式
样式----------------{ "always_show_minimap_viewport": true, "auto_find_in_selection&quo ...
- WSL Ubuntu 安装MongoDb 4.0导入公钥时遇到一个坑 (转)
WSL Ubuntu 安装MongoDb 4.0导入公钥时遇到一个坑 一路坑啊~~~网上的密钥都不对???? 不应该啊 源中默认是MongoDb 3.x 但是我想用4.0,然后按照mongodb官方 ...
- mssql格式化工具——SQL PRETTY PRINTER
1.mssql版本 mssql格式化工具有4个版本 1.桌面版 2.mssql插件 3.vs插件 4.api 2.下载地址 下载地址:http://www.dpriver.com/dlaction.p ...
- V-Box
Not ) (VERR_NEM_NOT_AVAILABLE). VT-x is disabled in the BIOS for all CPU modes (VERR_VMX_MSR_ALL_VMX ...
- ubuntu18.04图形模式切换到命令模式
命令模式 :Ctrl+Alt+F5 图形模式:Ctrl+Alt+F1
- Linux c++ 转string模板函数,写文件
#include <iostream> #include <sstream> using namespace std;//转string模板函数 template <cl ...
- ElementUI的el-table的多选的取消选择和筛选的取消所有过滤器之ref冲突问题
写此文的缘由:现如今,网络上,没有同下的解释形式(或者在外网,所以我没找到,或者大佬觉得太简单所以不屑解释).然而,我认为这是对VUE+ElementUI的底层框架的理解深入化问题.(为什么要深入理解 ...