[英]Why does inline-block work that way?
I'm fairly new to html and css. 我是html和css的新手。 I need two h3 elements to be displayed in 1 line.
我需要在一行中显示两个h3元素。 I am trying to use
display:inline-block
, but it works unexpected way for me. 我试图使用
display:inline-block
,但它对我来说意想不到的方式。 Here is fiddle example http://jsfiddle.net/4NrXF/31/ . 这是小提琴示例http://jsfiddle.net/4NrXF/31/ 。 Here i provided 4 different options of using inline-block attribute.
在这里,我提供了4种使用内联块属性的不同选项。 I need text "Some text before" to be displayed on the first row, and text "Display text" on the second row.
我需要在第一行显示文本“之前的一些文本”,并在第二行显示文本“显示文本”。 As you see - first option generates only one row, and thats inappropriate for me.
如您所见 - 第一个选项只生成一行,这对我来说不合适。 I thought that 4 option will work correctly, but as you can see that doesnt generate "DISPLAY TEXT" row for some reason.
我认为4选项将正常工作,但正如您所看到的那样,由于某种原因不会生成“DISPLAY TEXT”行。 Why does inline-block work like this?
为什么内联块会像这样工作?
Here is html and css i use: 这是我用的html和css:
Some text before
<h3 class="a"> DISPLAY </h3>
<h3 class="a"> TEXT </h3>
<h3 > DISPLAY </h3>
<h3 > TEXT </h3>
<h3 class="a"> DISPLAY </h3>
<h3 > TEXT </h3>
text before
<h3 > DISPLAY </h3>
<h3 class="a"> TEXT </h3>
.a {display: inline-block}
The "text before" is an inline element. “之前的文本”是内联元素。 If you want it on its own row, you can use your option 4 with "text before" wrapped in a block element, like
p
如果你想在它自己的行上,你可以使用你的选项4和“text before”包装在一个块元素中,比如
p
<p>Some text before</p>
<h3 class="a"> DISPLAY </h3>
<h3 class="a"> TEXT </h3>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.