css 怎样让div中的html标签向左浮动,因标签很多不像每个子标签都设左浮动?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 怎样让div中的html标签向左浮动,因标签很多不像每个子标签都设左浮动?相关的知识,希望对你有一定的参考价值。

如果不采用float,不妨考虑Flex布局

这几种布局都可以简单实现,换行的话也是一行代码即可,如下图

以下是一个简单的flex布局:

<!--思路:让原本每个子div都占据一行的变成五个一共占一行,在不使用float的情况下,使用flex去实现-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .content display:-webkit-flex; display:flex;   /*Flex布局*/
    /*注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。*/
</style>
<body>
<!--设置若干个div,content下的div在flex 的作用下,都会往左浮动-->
<div class="content">  <!--设置类名-->
    <div>1</div><!--设置5个div-->
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
</body>
</html>
参考技术A <style>
    .content li float:left; 
</style>

<div class="content">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
</div>

参考技术B

这个很简单的,css里面有个通配符选择器,如果你希望div里面所有标签左浮动的话,你可以这样写:

div * float:left

这样就可以啦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div.fudong  width: 200px;height: 200px;background-color: pink; 
        .fudong div  width: 50px;height: 50px;
        .aa background-color: yellow
        .bb background-color: red
        .cc background-color: blue
        .dd background-color: orange
        .ee background-color: black
        div.fudong *  float: left; 
    </style>
</head>
<body>
     
    <div class="fudong">
        <div class="aa"></div>
        <div class="bb">
            <div class="dd"></div>
            <div class="ee"></div>
        </div>
        <div class="cc"></div>
    </div>
</body>
</html>

参考技术C div *float:left,是指所有的标签都向左浮动哦,估计会很乱 参考技术D div *float:left

html 使用CSS内联的水平html导航菜单。在这个例子中,我们让ul元素和a元素向左浮动。该

<html>


  <head>


    <style>


      ul
      {
        
        float:left;
        
        width:100%;

        padding:0;

        margin:0;

        list-style-type:none;

      }


      a
      {
        
        float:left;

        width:6em;

        text-decoration:none;

        color:white;

        background-color:purple;

        padding:0.2em 0.6em;

        border-right:1px solid white;

      }


      a:hover 
      {
        
        background-color:#ff3300;
        
      }


      li
      {
        
        display:inline;
        
      }


</style>


  </head>



  <body>

  <ul>

    <li>
      <a href="#">Link one</a>
        
    </li>
    
    <li>
      <a href="#">Link two</a>
        
    </li>


    <li>
      <a href="#">Link three</a>
    </li>


    <li>
    
      <a href="#">Link four</a>
        
    </li>

  
</ul>


<p>
In the example above, we let the ul element and the a element float to the left.
The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.
The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.
</p>


</body>


</html>

以上是关于css 怎样让div中的html标签向左浮动,因标签很多不像每个子标签都设左浮动?的主要内容,如果未能解决你的问题,请参考以下文章

div css float浮动用法(left right)

html5和css篇有关浮动以及如何清除浮动

CSS 向左浮动到以页面为中心的 Div

1-浮动布局

css设置左浮动

CSS学习—浮动