li水平与div水平

1.让ul li水平排列的CSS代码:

li {display:inline}

  或者采用float:left方式。

2.让div水平并排:

<div style="float:left"></div>
<div style="float:left"></div>

  或者

<div style="float:left">
    <div></div>
    <div></div>
</div>

  但是有一点注意,当把ul li和div放置在同一个div1中,li采用了float会影响到后面的div,所以采用dispaly比较保险。

  不过还有待再学习学习.......

时间: 2024-08-08 12:00:26

li水平与div水平的相关文章

调整窗口大小也能够实现div水平垂直居中代码实例

调整窗口大小也能够实现div水平垂直居中代码实例:将一个div在窗口内实现居中效果,基本上没有什么难度,具体可以参阅CSS实现div屏幕居中效果代码一章节. 但是有时候我们可能会有这样的需求,就是在调整窗口大小的情况下也能够实现div垂直水平居中效果,下面通过代码实例做一下简单介绍,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="

如何实现div水平和垂直居中效果

如何实现div水平垂直和居中效果: 有时候可能我们需要让一个div在它的父容器中居中显示.先看代码实例再进行分析. 代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落<

让DIV水平和垂直居中的几种方法

我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中. CSS让DIV水平居中 说明,本文中所指的DIV包括HTML页面中所有的元素. 让一个DIV水平居中,直接用CSS就可以做到.只要设置了DIV的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1 .mydiv{ 2 m

css 实现DIV水平垂直居中于屏幕

原文地址: http://www.manongjc.com/article/374.html css如何将div实现全屏水平垂直居中,本章节介绍一下如何将一个div元素在整个网页内实现水平垂直居中效果,代码是最有说服力的,直接看代码. 代码如下: <!DOCTYPE html> <html> <head> <title>css 实现DIV水平垂直居中于屏幕</title> <style type="text/css"&g

如何实现多个div水平均匀排列且量两端贴壁

如何实现多个div水平均匀排列且量两端贴壁:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在网页布局中,经常有这样的需求,那就是几个div水平均匀在排列在一个盒子中,并且两端div外侧紧贴盒子内壁,如下图所示:下面先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="

DIV水平和垂直居中

要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%, 最后将该DIV分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半. #parent {position: relative;} #child { position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -2

【html】【10】div布局[div水平垂直居中]

必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置成不同的值. 例子: 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&qu

未知宽高div水平垂直居中3种方法

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <!--方法1:一个未知宽高的弹出框,水平垂直居中--> <div style="position:relative;width:100%;height:600px;border:1px solid #888">方法1 <div

未知宽高的div水平垂直居中

未知宽度的div使内容水平垂直居中方法一:使用display:flex:justify-content:center;align-items: center;属性代码如下:<style> #box{ display: flex; justify-content:center; align-items: center; height: 500px; }</style><div id="box"> 水平垂直居中</div>方法二:使用tran