css导航怎么靠右

html-css014

css导航怎么靠右,第1张

设置3个导航nav,最右边的nav设置class=right,然后设置nav的css边距,宽,高,背景颜色(便于我们看见),再设置一个float为右就会靠右排列,注意:float时第一个会到右边,所以设置第一个为最右边的导航栏

代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

nav{

margin: 5px

width: 100pxheight: 200px

background-color: red

float: right

}

</style>

</head>

<body>

<nav class="right">右</nav>

<nav>中</nav>

<nav>左</nav>

</body>

</html>

可以用“text-align:right”让文字靠右对齐。

1、新建html文档,在body标签中添加div标签,为div设置一个id,这里以“demo”为例:

2、在div标签中添加文字,然后为div标签设置宽高和边框,这时默认情况下文字靠右对齐:

3、为div添加“text-align:right”,其中“text-align”指的是文本对齐方式,“right”指的是靠右对齐,这时网页中文字将会靠右对齐:

1、可以使用flex布局快速实现这个效果。具体的方法是,首先打开hbuilder编辑器,新建一个文件,写入一个大的div,里面在包裹3个小div,给大div的class属性命名为container,小div命名为child:

2、然后在上方设置样式,先给外围的div设置宽度为600px以及display属性为flex,然后设置方向属性flex-direction为横向,接着设置小div的宽度为200px,再设置flex属性的值为1,意思是所占比例为1,最后调整一下背景颜色,字体大小就可以了:

3、最后打开浏览器,即可看到3个等份的div了: