元素不会以行内的方式显示

10 浏览
0 Comments

元素不会以行内的方式显示

我有两个使用以下属性进行样式设置的

元素：

.elem1 {

宽度：47.5％;

右边距：2.5％;

显示：inline-block;

}

.elem2 {

宽度：47.5％;

右边距：2.5％;

显示：inline-block;

}

注意：如果我将边距减小到2.25％，当父元素是时，元素会以内联方式定位。如果我将它们包裹在一个宽度较窄的另一个

中，第二个元素会再次换行。

由于总和等于父元素的宽度的100％，为什么元素不是以内联方式定位，并且如何解决这个问题，以便它们始终以内联方式定位？

我基本上想要它们浮动，而不使用浮动属性。

您可以在以下链接中查看更好的视觉效果：

- 父元素是：[链接1]

- 父元素是且边距减小到2.35％：[链接2]

- 父元素是另一个宽度为父元素的75％的

：[链接3]

解决方案必须仅使用CSS，并且仅适用于两个elem元素，因为用户可能没有设置父容器。

0

3 答案

0 Comments

问题的原因是元素的display属性设置为inline或inline-block，导致元素无法显示在同一行。解决方法是将父元素的display属性设置为flex。

在第一个例子中，将body元素的display属性设置为flex，可以解决问题。具体代码如下：

body {
  display: flex;
}
.elem1 {
  width: 47.5%;
  margin-right: 2.5%;
  display: inline-block;
}
.elem2 {
  width: 47.5%;
  margin-right: 2.5%;
  display: inline-block;
}

在第二个例子中，将.container元素的display属性设置为flex，可以解决问题。具体代码如下：

* {
  margin: 0;
  padding: 0;
}
.container {
  width: 75%;
  border: 1px solid red;
  margin: 0 auto;
  position: relative;
  display: flex;
}
.elem1 {
  width: 47.5%;
  margin-right: 2.25%;
  display: inline-block;
}
.elem2 {
  width: 47.5%;
  margin-right: 2.25%;
  display: inline-block;
}

需要注意的是，这些解决方法可能不适用于不支持flex属性的浏览器，因此在使用这些方法时需要考虑浏览器的兼容性。

0
0 Comments

问题的原因是行内元素允许在文本中添加空格，这会导致div元素之间出现额外的空间，使得div元素无法在同一行中显示。为了解决这个问题，可以在元素之间添加注释来覆盖默认的行为，并作为提醒自己和他人查看代码的方式。

然而，如果不能修改HTML代码，只能使用CSS来解决这个问题。一种可能的解决方法是将body标签的字体大小设置为0px。尽管这可能不是一个理想的解决方案，因为这可能会影响到用户对这些元素的访问。

但是，需要注意的是，在某些浏览器（如Opera和Android）中，将字体大小设置为0会导致一些意外的行为。因此，我们需要在使用时注意这一点。

解决这个问题的方法是在元素之间添加注释或者将body标签的字体大小设置为0px。

0
0 Comments

Elements do not display inline是因为display: inline-block;默认情况下会有一些间距。为了去除这个间距，可以在.container中使用font-size: 0。下面是一个例子：

* {
  margin: 0;
  padding: 0;
}
.container {
  width: 75%;
  font-size: 0;
  border: 1px solid red;
  margin: 0 auto;
  position: relative;
  display: inline-block;
}
.elem1 {
  width: 47.5%;
  margin-right: 2.25%;
  display: inline-block;
}
.elem2 {
  width: 47.5%;
  margin-right: 2.25%;
  display: inline-block;
}

点击这里查看示例。

如果要设置间距为2.5%，而不是2.25%，只需将margin-right: 2.25%改为margin-right: 2.5%即可。点击这里查看更新后的示例。

需要注意的是，将font-size设置为0在一些浏览器（如Opera和Android）中可能会有意外的行为。感谢提供解决方法的同学。

0