Heim > Web-Frontend > HTML-Tutorial > 请教高手问题关于div+css的问题。_html/css_WEB-ITnose

请教高手问题关于div+css的问题。_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:18:02
Original
938 Leute haben es durchsucht

请问高手,我编写了一个盒子模型代码彩色部分有些疑惑,疑惑的内容是:
list-style-type为什么可以添加在.middleborder中照样出来结果一样?
float:left;为什么只能在.middleborder li中运行成功,而不能在.middleborder运行??

代码附上:
one.html文件内容:

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 


   New Document 
  
 

 
  

  

      
  • 请教高手问题关于div+css的问题。_html/css_WEB-ITnose

  •   
  • 请教高手问题关于div+css的问题。_html/css_WEB-ITnose

  •   
  • 请教高手问题关于div+css的问题。_html/css_WEB-ITnose

  •   
  • 请教高手问题关于div+css的问题。_html/css_WEB-ITnose

  • 请教高手问题关于div+css的问题。_html/css_WEB-ITnose


  

 


one.css内容如下:
.bigborder
 {
 margin-left:260px;
 width:500px;
 height:180px;
border:1px solid red;
margin-top:200px;
 }
 .middleborder
 {
  width:480px;
  height:150px;
  border:1px solid gray;
  margin-left:5px;
 padding-left:5px;
 }
 .middleborder li
 {
list-style-type:none;
 margin-right:8px;
float:left;
 }

 .middleborder  li img
  {
  width:50px;
  height:50px;
  border:1px solid black;
  margin-top:10px;
  
 }

回复讨论(解决方案)

标准的用法 是 这样的 :ul{list-style-type:none;}他的作用是 此ul包涵的 li列表项的样式 是空的 ,你设置的是 :.middleborder li
 {
list-style-type:none;}
其实 也是作用在  li元素上面 所以效果等同 。另外 ul{float:left}的意思是 ul元素浮动 ,但是你想要的结果是 li元素浮动 ,所以效果当然不同啦 应该是 .middleborder li{float:left}
给你个 基本的用法:

ul{margin:0;padding:0;list-style-type:none}ul li{float:left;display:inline;}
Nach dem Login kopieren

标准的用法 是 这样的 :ul{list-style-type:none;}他的作用是 此ul包涵的 li列表项的样式 是空的 ,你设置的是 :.middleborder li
 {
list-style-type:none;}
其实 也是作用在  li元素上面 所以效果等同 。另外 ul{float:left}的意思是 ul元素浮动 ,但是你想要的结果是 li元素……

请问下高手,float:left是不是只能在li元素中使用浮动效果??ul元素不能使用或者说使用后没有效果?

ul当然可以用float属性  ,但是 不适合你的这个语境。你用在 ul元素上面的话 ,意思是 把ul(他包涵若干li元素)整个浮动,而你的意思 是把 ul里面的 li元素浮动而已 呵呵  ,比方说,你有若干个 ul元素,如果想让 这几个 ul元素 浮动排列的话 ,就可以 用ul{float:left}

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage