如何在同一行上同时包含div和heading？

Question

我正试图在同一行上同时获得div和标题。我怎么能做到这一点？目前，红色div位于文本后面。

感谢。

.underlined {
border-bottom: 1px dotted #000;
text-decoration:none;
}

.block {
height:15px;
background-color: #ff5050;
}

https://jsfiddle.net/zp9wa7hf/

Answer 1

使用内联属性并设置div的宽度，如下所示：

.underlined {
    border-bottom: 1px dotted #000;
    text-decoration:none;
display: inline-block;
width:20%;
}

.block {
height:15px;
background-color: #ff5050;
display: inline-block;  
width:80%;
}

Answer 2

你需要设置宽度和浮动

因为默认情况下div是一个以全宽放置的块元素

Answer 3

您可以使用Flexbox而不需要在任何元素上指定固定宽度，也可以与align-items: center进行垂直对齐

＆＃13;

＆＃13;

.underlined {
  border-bottom: 1px dotted #000;
  text-decoration: none;
}
.block {
  height: 15px;
  flex: 1;
  background-color: #ff5050;
}
h3 {
  display: flex;
  align-items: center;
}

＆＃13;

<h3><u class="underlined">ABOUT ME</u><div class="block"></div></h3>

＆＃13;

＆＃13;

＆＃13;

Answer 4

检查这个小提琴：

https://jsfiddle.net/68v28o3g/

.underlined {
    border-bottom: 1px dotted #000;
    text-decoration:none;
  float:left;
  width:auto;
}

.block {
height:15px;
background-color: #ff5050;
width:80%;
margin-left:20%;

  }

<h3>
<div style="float:left; width:100%">
<u class="underlined">ABOUT ME</u>
<div class="block">
</div>
</div>

</h3> 

请注意这些方法已弃用，请使用 BootStrap 以获得更好的结果（，如果可能）

Answer 5

如果您要求红线覆盖文本数据，请使用以下代码 的 HTML

<div class="block">
<h3><u class="underlined">ABOUT ME</u>
</div></h3> 

CSS无变化

如果您要求红线位于文本旁边，请使用以下CSS和HTML

<强> HTML

<h3><u class="underlined">ABOUT ME</u><div class="block">
</div></h3> 

CSS

.underlined {
    border-bottom: 1px dotted #000;
    text-decoration:none;
}

.block {
height:15px;
flex : 1;
background-color: #ff5050;
  }
  h3{
    display : flex;
    align-items: center;
  }