css 显示:内联块运行不正常[重复]

pcrecxhr  于 2023-02-06  发布在  其他
关注(0)|答案(3)|浏览(199)
    • 此问题在此处已有答案**:

Align inline-block DIVs to top of container element(5个答案)
2天前关闭。
我想把三个粉红色的框排成一行,但是应用display:inline-block会在顶部创建一个空间,这是什么问题?

  • --------------HTML语言--------------
<div class="hello">
  <h1>이건 첫째</h1>
</div>
<div class="hello">
  <h2>이건 둘째</h2>
  <input type="text">
</div>
<div class="helloCss">
  <h2>이건 셋째</h2>
  <ul>
    <li>Hello</li>
    <li>Css</li>
    <li>World!</li>
  </ul>
</div>
<div class="helloJava">
  <h2>이건 넷째</h2>
  <ol>
    <li>Hello</li>
    <li>Java</li>
    <li>World!</li>
  </ol>
</div>
  • ------------SCSS--------
$g:rgb(115, 115, 115);

@mixin box($color:pink){
    color:$g;
    background-color:$color;
    width:200px;
    height:300px;
    border:2px solid $g;
}

.hello{
    display:inline-block;
    input{
        margin:{
            left:10px;
            top:10px;
        }
    }
    @include box();
    h1{
        background-color:rgb(238, 206, 219);
    }
    &Java{
        @include box();
        background-color:rgb(175, 202, 255);
    }
}

.helloCss{
    @extend .hello;
}

margin 0,padding 0,wrap in one div,将h1和h2更改为span即使我从开发人员工具中抬起鼠标,该区域也不会出现。

i5desfxk

i5desfxk1#

因为元素被归类为inline,浏览器默认情况下会将文本基线与相邻元素垂直对齐。如果你在文本的最后一行下画一条线,你会看到它们都被放置在彼此相邻的位置。
更多信息来自MDN here

解决这个问题最简单的方法是添加vertical-align: top或类似的代码到你的css中,如下所示:

.hello,
.helloCss {
  display: inline-block;
  
  vertical-align: top; /* added this */
  
  color: #737373;
  background-color: pink;
  width: 200px;
  height: 300px;
  border: 2px solid #737373;
}

.hello input,
.helloCss input {
  margin-left: 10px;
  margin-top: 10px;
}

.hello h1,
.helloCss h1 {
  background-color: #eecedb;
}

.helloJava {
  color: #737373;
  background-color: pink;
  width: 200px;
  height: 300px;
  border: 2px solid #737373;
  background-color: #afcaff;
}
<div class="hello">
  <h1>이건 첫째</h1>
</div>
<div class="hello">
  <h2>이건 둘째</h2>
  <input type="text">
</div>
<div class="helloCss">
  <h2>이건 셋째</h2>
  <ul>
    <li>Hello</li>
    <li>Css</li>
    <li>World!</li>
  </ul>
</div>
<div class="helloJava">
  <h2>이건 넷째</h2>
  <ol>
    <li>Hello</li>
    <li>Java</li>
    <li>World!</li>
  </ol>
</div>
xriantvc

xriantvc2#

正如Timothy提到的,这可能是inline-block的默认行为,但是,如果可以选择对HTML做一个微小的改变,那么用flex创建一个父div会更容易对齐div。

  • 超文本标记语言 *
<div class="flex">
  <div class="hello">
    <h1>이건 첫째</h1>
  </div>
  <div class="hello">
    <h2>이건 둘째</h2>
    <input type="text">
  </div>
  <div class="helloCss">
    <h2>이건 셋째</h2>
    <ul>
      <li>Hello</li>
      <li>Css</li>
      <li>World!</li>
    </ul>
  </div>
</div>
<div class="helloJava">
  <h2>이건 넷째</h2>
  <ol>
    <li>Hello</li>
    <li>Java</li>
    <li>World!</li>
  </ol>
</div>
  • 中国证监会 *
$g: rgb(115, 115, 115);

@mixin box($color: pink) {
  color: $g;
  background-color: $color;
  width: 200px;
  height: 300px;
  border: 2px solid $g;
}
.flex {
  display: flex;
  gap: 5px;
}
.hello {
  input {
    margin: {
      left: 10px;
      top: 10px;
    }
  }
  @include box();
  h1 {
    background-color: rgb(238, 206, 219);
  }
  &Java {
    @include box();
    background-color: rgb(175, 202, 255);
  }
}

.helloCss {
  @extend .hello;
}
camsedfj

camsedfj3#

粉色框顶部的空格可能是由于inline-block元素的默认行为,它添加垂直空格,也称为"换行符"。要删除此空格,您可以添加font-size:0添加到父容器,然后将适当的字号添加到子元素。

.hello {
    font-size: 0;
    ...
.hello * {
    font-size: 16px;
    ...

相关问题