Question

我要在div旁边放置一个跨度。通常，它可以正常工作，但是当我调整浏览器的大小并且div分为两行时，跨度转到下一行。

我已经尝试过“ display：inline”属性，但是它不起作用。

<div id="d1"> Welcome to HTML and CSS</div> <span id ="cur">|</span>

由于浏览器的大小调整，当div出现在两行中时，我希望将跨度放在div之后

Answer 1

如果我正确理解了您的问题，请使用float:left;将span放在div旁边，如下所示：

<div id="d1" style="float: left;"> Welcome to HTML and CSS</div>
<span id ="cur">|</span>

Answer 2

更改的位置是由于div是一个块级元素，而span是一个内联级元素。您可以将display: inline应用于div，但是我将使用:: after CSS伪选择器并完全删除跨度。

请注意，我在您的div中添加了一些填充文本，以演示多行布局。

将该行放置在文本之后（而不是整个div之后）的原因是：:: after伪元素被插入为它们所应用的元素的最后一个子元素-在这种情况下，如果要添加“ |”到文本末尾-在div之内。

#d1::after {
  content: '|';  
}

<div id="d1"> Welcome to HTML and CSS. This is some more content to show the two lines. The line will be placed at the end of this div - so you don't need another span.</div>

Answer 3

mDatabase.child("users").child(uid).child("username").setValue("pere");

#cur{
  display:none;
}

@media only screen and (max-width: 248px) {
#d1{  
  display:inline-block;
  width:80%;
}
#cur{
  display:inline-block;
  vertical-align:top;
}
}

在div之后放置跨度

3 个答案: