布局
通常有三种方式
{
1. position
2. float： left --》 其次是这个
3. block： inline-block --》 他们推荐我用这个
}
具体描述
由于好久没有写html了， 早已忘的一干二净， 今天忽然想写html，需要在top写个导航条， 但是又不记得li怎么变成行内块标签了， 只能去请教一下前端的同事了
自己找到的答案是display的方法
他告诉我的是float方法
方法一：
display方法， 需要将li转换成行内标签或者行内块标签
<html>
<head>
<style type="text/css">
li {
display: inline; <-- 或者inline-block -->
list-style:none;
margin:0 20px;
}
div {
display: none；
}
style>
head>
<body>
<ul>
<li>aali>
<li>bbli>
<li>ccli>
<li>ddli>
ul>
body>
html>
方法二：
选择左浮动方式， float：left；
<html>
<head>
<style type="text/css">
li {
float: left;
list-style:none;
margin:0 20px;
}
div {
display: none；
}
style>
head>
<body>
<ul>
<li>aali>
<li>bbli>
<li>ccli>
<li>ddli>
ul>
body>
html>
自己写的小例子：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
#ac-globalnav {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 9999;
display: block;
margin: 0;
width: 100%;
min-width: 1024px;
height: 88px;
max-height: 100px;
background: #333;
background: rgba(0,0,0,0.8);
font-size: 17px;
user-select: none;
}
li {
display: inline;
list-style:none;
margin:0 35px 0 35px;
color: #fff;
line-height:58px;
cursor:pointer;
}
li:hover{
color: red;
}
ul {float:right; margin-right:25%;}
style>
head>
<body>
<div>
<div id="ac-globalnav">
<ul>
<li>首页li>
<li>简介li>
<li>自学教程li>
<li>指法表li>
<li>曲谱li>
<li>萧选购维护li>
<li>洞箫音乐li>
<li>li>
ul>
div>
div>
<div>
div>
<div>
div>
body>
html>
京公网安备 11010802041100号