Question

＆＃13;

* {
  padding:0;
  margin:0;
}    

div.header{
  width:300px;
  height:150px;
  border:1px solid red;
}

div.header_inside{
  margin:0 auto;
  width:150px;
  height:100px;
  border:1px solid red;
}

＆＃13;

<div class="header">
  <span>header</span>
  <div class="header_inside">header_inside</div>            
</div>

＆＃13;

文字header位于范围标签中，它是内联元素，为什么它不能与div {{1}显示在同一行（或者说，在同一高度） }？
要在div.header_inside的css中添加header_inside，可以使跨栏中的文字与div margin-top:-20px;显示在同一行，这不是我的问题。

Answer 1

默认情况下，div为display: block，因此它会在其前后生成一个带有换行符的块框。

如果您希望它与某些内嵌内容位于同一行，则需要将其更改为display: inline，display: inline-block等。

Answer 2

div是一个块元素，需要所有空间。因此，块元素旁边不能放置其他元素。因此，您必须将display的{{1}}更改为div或inline。您可以将代码更改为以下内容：

inline-block

* {
  padding:0;
  margin:0;
}    
div.header {
  width:300px;
  height:150px;
  border:1px solid red;
}
div.header_inside{
  display:inline-block;
  margin:0 auto;
  width:150px;
  height:100px;
  border:1px solid red;
}

Answer 3

你可以使用“inline-block”属性，所以仍然是一个内联元素但你可以添加宽度和高度

<!DOCTYPE html>
<html>
<style type="text/css">
*{
padding:0;
margin:0;
}    
div.header{
width:300px;
height:150px;
border:1px solid red;
}
div.header_inside{
margin:0 auto;
width:150px;
height:100px;
border:1px solid red;
display: inline-block;
}
</style>
<body>
    <div class="header"><span>header</span>
        <div class="header_inside">header_inside               
        </div>            
    </div>
 </body>
</html>

为什么跨度不能与div显示在同一行？

3 个答案: