精华内容
下载资源
问答
  • 让div独占一行

    千次阅读 2019-06-23 23:39:00
    div A 和 B为例,宽高为100px。 1、使div浮动起来,效果图如下   ...2、给 div 添加CSS属性 display:inline;... 但是这样会造成 div 的宽高无效,宽高是被 div 内的内容... 但是这样会产生个新的问题,A ...

    以  div  A 和 B为例,宽高为100px。

     

     

    1、使div浮动起来,效果图如下

      

     

    2、给 div 添加CSS属性  display:inline;

      但是这样会造成 div 的宽高无效,宽高是被 div 内的内容撑开的,效果如下图:

      

      使用  display:inline-block;  效果如下图:

      

      但是这样会产生一个新的问题,A 和 B 中间有一个缝隙

      这个问题产生的原因是换行引起的,因为我们写标签时通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合        并成一个空白符,而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。

      解决方案:

      对父元素添加,{font-size:0},即将字体大小设为0,那么那个空白符也变成0px,从而消除空隙 (div内的字同时消失)    

     效果图如下:

      

      

    转载于:https://www.cnblogs.com/PHP0222wangdong/p/11060004.html

    展开全文
  • css实现div强制不换行DIV盒子没有赋予CSS样式时,默认DIV盒子是独占一行(宽度为100%)。一、对div设置float浮动样式对div设置float:left样式相当于是让div对象靠左,自然失去了本身宽度样式。Documentdiv{float: left...

    css实现div强制不换行

    DIV盒子没有赋予CSS样式时,默认DIV盒子是独占一行(宽度为100%)。

    一、对div设置float浮动样式

    对div设置float:left样式相当于是让div对象靠左,自然失去了本身宽度样式。

    Document

    div{

    float: left;

    width: 120px;

    height: 120px;

    background: #eee;

    }

    1
    2
    3
    4
    5

    二、对div设置display并排样式

    通过对div设置display:inline-block样式让div同样失去默认100%独占一行的宽度。

    display:inline意思是让对象并排显示。

    Document

    div{

    display:inline-block;

    }

    1
    2
    3
    4
    5

    总结:实现div不换行其实是让div默认独占一行的样式去掉,去掉可以使用float和display样式。

    本文来自css答疑栏目,欢迎学习!

    展开全文
  • 我们知道 div是块级元素,是独占一行的.一般情况下,两个相邻的div是不会处于一行的 例如: Html代码  >  html>  head lang="en">   meta charset="UTF-8">   title>两个div处于同一行...

     我们知道 div是块级元素,是独占一行的.一般情况下,两个相邻的div是不会处于一行的

    例如:

    Html代码  收藏代码
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head lang="en">  
    4.     <meta charset="UTF-8">  
    5.     <title>让两个div处于同一行</title>  
    6. </head>  
    7. <body>  
    8. <div style="height: 40px;width: 80px;background-color: #006ba4" >  
    9.     div1  
    10. </div>  
    11. <div style="height: 40px;width: 70px;background-color:chartreuse" >  
    12.     div2  
    13. </div>  
    14. </body>  
    15. </html>  

     浏览器效果:

     

    那么如何让两个相邻的div在同一行呢?

    有两种方式

    方式一:使用float

    Html代码  收藏代码
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head lang="en">  
    4.     <meta charset="UTF-8">  
    5.     <title>让两个div处于同一行</title>  
    6.     <style>  
    7.         div{  
    8.             float: left;  
    9.         }  
    10.     </style>  
    11. </head>  
    12. <body>  
    13. <div style="height: 40px;width: 80px;background-color: #006ba4" >  
    14.     div1  
    15. </div>  
    16. <div style="height: 40px;width: 70px;background-color:chartreuse" >  
    17.     div2  
    18. </div>  
    19. </body>  
    20. </html>  

     运行效果:

     

     

    方式二:使用inline-block

    Html代码  收藏代码
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head lang="en">  
    4.     <meta charset="UTF-8">  
    5.     <title>让两个div处于同一行</title>  
    6.     <style>  
    7.         div{  
    8.             display: inline-block;  
    9.         }  
    10.     </style>  
    11. </head>  
    12. <body>  
    13. <div style="height: 40px;width: 80px;background-color: #006ba4" >  
    14.     div1  
    15. </div>  
    16. <div style="height: 40px;width: 70px;background-color:chartreuse" >  
    17.     div2  
    18. </div>  
    19. </body>  
    20. </html>  

     运行效果:

     

    注意:

    (1)为什么要使用displayinline-block;而不是displayinline;,因为displayinline导致元素的height和width样式失效.

    (2)这两种方式的显示效果并不是完全一样的,为什呢?

    方式二中两个div中会有大小为8px的margin,这是从哪里来的呢?是从body继承过来的.

    展开全文
  • 1.input标签独占一行,与button标签无法同行显示 (使用position属性进行设置,position属性详见。) 解决方法: 一.对button的position进行设置,使之与input同行。 二.将input与button放在一个大div中,然后将...
  • 快元素独占一行,如下的这个例子,before div、in div1、in div2、after div分别占一行,也就是说,块元素前后都不能有行内元素和文本节点。 before div<div style="display:inline-block"...

    行内元素,排列在一行,但是不能设置它的width、height、margin、padding属性,即使设置了,也是不生效的。

    快元素独占一行,如下的这个例子,before div、in div1、in div2、after div分别占一行,也就是说,块元素前后都不能有行内元素和文本节点。

        before div<div style="display:inline-block">in div1</div> <div style="display:inline-block">in div2</div> after div

    那么如何让div 可以排列在一行呢?

    用如下的方式:

    div{
         display:inline-block;//如果网站只兼容谷歌和火狐,这样写就可以
    }
    div{
         display:inline-block;//但是IE不支持inline-block,需要这么写,这样写3个浏览器
                                     //就可以都兼容了
         *display:inline;
         *zoom=1;
    }

    而且:当我们对div设置成了inline-block的时候,同样可以对其设置width、height属性,如果要让其居中,就不需要margin:0 auto;了,因为他具有了inline的特性,所以用text-align:center就行了。

    例子:如下代码,执行之后,里面的div就是居中的,有宽,有高。

    <div style="border:solid;width:500px;height:400px;text-align:center;">
            <div style="border: solid; width: 300px; height: 200px;display:inline-block;">inline-block div</div>
        </div>

    当我们对一个行内元素<span>设置成inline-block的时候,它也是可以有宽有高的(当我们不设置成inline-block的时候,它默认是inline,给他设置宽高,没效果)

    <span style="border: solid; width: 300px; height: 200px;">The Span hava width and height</span>

     

    转载于:https://www.cnblogs.com/mrxiaohe/p/5234986.html

    展开全文
  • div的标准流中,无论div多小,它都独占一行,相互没有交集。 但是很多地方要使两个或者多个div处于一行,这时候要对操作div设置浮动属性。设置浮动后就不再属于标准流,成为一个新的流。又因为浮动是漂浮在标准...
  • DIV横向排列_CSS如何多个div盒子并排同行显示 ...div盒子本身默认样式属性是独占一行,而解决div独占一行方法通常有两种,一种为设置浮动,另外一种为设置display样式。接下来为大家通过文章+图
  • 代码如下:三个div盒子均独占一行显示div盒子本身默认样式属性是独占一行,而解决div独占一行方法通常有两种,一种为设置浮动,另外一种为设置display样式。接下来为大家通过文章+图片+案例方法介绍解决div盒子对象...
  • 代码如下:三个div盒子均独占一行显示div盒子本身默认样式属性是独占一行,而解决div独占一行方法通常有两种,一种为设置浮动,另外一种为设置display样式。接下来为大家通过文章+图片+案例方法介绍解决div盒子对象...
  • 代码如下:三个div盒子均独占一行显示div盒子本身默认样式属性是独占一行,而解决div独占一行方法通常有两种,一种为设置浮动,另外一种为设置display样式。接下来为大家通过文章+图片+案例方法介绍解决div盒子对象...
  • div盒子本身默认样式属性是独占一行,而解决div独占一行方法通常有两种,一种为设置浮动,另外一种为设置display样式。一、使用css float并排显示我们对div设置一个float浮动属性即可解决不并排显示,只要你的并排...
  • div盒子本身默认样式属性是独占一行,而解决div独占一行方法通常有两种,一种为设置浮动,另外一种为设置display样式。一、使用css float并排显示我们对div设置一个float浮动属性即可解决不并排显示,只要你的并排...
  • 代码如下:三个div盒子均独占一行显示div盒子本身默认样式属性是独占一行,而解决div独占一行方法通常有两种,一种为设置浮动,另外一种为设置display样式。接下来为大家通过文章+图片+案例方法介绍解决div盒子对象...
  • 原因:因为body跟div一样是块元素,直接赋值给块元素height:100%,相当于就是默认值的独占一行。所以这里写body{ width:100%; height:100%;},其实是毫无作用的。但是又不希望给body设置固定的大值宽高,怎么办? ...
  • DIV盒子默认是换行独占100%宽度:DIV盒子没有赋予CSS样式时,默认DIV盒子是独占一行(宽度为100%)。如下默认情况HTML代码:html>div实例www.dvicss5.com第一个div第二个盒子独占一行div盒子截图2个div对象盒子独占...
  • 如何两个div并排布局?

    千次阅读 2016-08-04 15:05:34
    原因:div为块级元素,独占一行 过程:1、当单独对第一个div添加”float:left;”,会出现以下效果 分析:a、将div的宽高设置不同观看效果。b、设置float后该div就好像在水平面跳出来的一张纸,而第二个div则...
  • div属于块元素,每个div独占一行,所以要想多个div同时在一行显示,则需要使用两种技术: 1.浮动技术float 2.定位技术position 浮动技术示例代码如下: <!DOCTYPE ...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 159
精华内容 63
关键字:

让div独占一行