如何在一行中显示标签和跨度内容？

Question

我试图在一行中显示标签和跨度内容。我尝试下面的代码，但它不起作用。另外，我将宽度设置为标签。

在最后一个标签中，与上面三个相比，我有更多的内容。如何在一行中设置，因为它显示在标签的下方。

你能帮助我吗？

我需要这样的输出。

html,body{margin: 0;padding: 0;height: 100%;}
.my_office_content{padding: 20px;}
.my_office_content label{width: 250px;font-weight: bold;display: inline-block;}
.my_office_border{border-bottom: 1px solid #ccc;}

<div class="my_office_content">

  <div class="my_office_border">
    <label>Lorem</label>
    <span>Lorem ipsum dolor sit amet,</span>
  </div>

  <div class="my_office_border">
    <label>Lorem</label>
    <span>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,     </span>
  </div>

  <div class="my_office_border">
    <label>Lorem Lorem</label>
    <span>Lorem ipsum dolor sit amet,</span>
  </div>

  <div class="my_office_border">
    <label>Lorem LoremLorem</label>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

    <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.</span></p>
  </div>

</div>

Answer 1

你将最后一个跨度放在<p></p>中，这就是它在下面形成块的原因。

Answer 2

您可以使用white-space属性：

＆＃13;

＆＃13;

.my_office_border{
    white-space: nowrap;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

将标签放在span

中

<span><label>Label content</label>,Lorem ipsum dolor sit amet,</span>

Answer 4

float:left和label都应使用span。然后添加width，使它们保持宽度。

＆＃13;

＆＃13;

html,body{margin: 0;padding: 0;height: 100%;}
.my_office_content{padding: 20px;}
.my_office_content label{font-weight: bold;}
.my_office_border{border-bottom: 1px solid #ccc;}
.my_office_border label { float: left; width: 30%; padding-right: 10px; box-sizing: border-box; }
.my_office_border label+span { float:left; width: 70%; }

.my_office_border::after {
    content: "";
    clear: both;
    display: table;
}

＆＃13;

<div class="my_office_content">

  <div class="my_office_border">
    <label>Lorem</label>
    <span>Lorem ipsum dolor sit amet,</span>
  </div>

  <div class="my_office_border">
    <label>Lorem</label>
    <span>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,     </span>
  </div>

  <div class="my_office_border">
    <label>Lorem Lorem</label>
    <span>Lorem ipsum dolor sit amet,</span>
  </div>

  <div class="my_office_border">
    <label>Lorem LoremLorem</label>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
</span>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

html,body{margin: 0;padding: 0;height: 100%;}
.my_office_content{padding: 20px;}
.my_office_content label{width: 250px;font-weight: bold;}
.my_office_border{border-bottom: 1px solid #ccc; display:table;width:100%}
.my_office_border label{float:left; width:30%;}
.my_office_border span{float:right; width:70%;}

<div class="my_office_content">

  <div class="my_office_border">
    <label>Lorem</label>
    <span>Lorem ipsum dolor sit amet,</span>
  </div>

  <div class="my_office_border">
    <label>Lorem</label>
    <span>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,     </span>
  </div>

  <div class="my_office_border">
    <label>Lorem Lorem</label>
    <span>Lorem ipsum dolor sit amet,</span>
  </div>

  <div class="my_office_border">
    <label>Lorem LoremLorem</label>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
</span>
  </div>
  <div class="my_office_border">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
</span>
  </div>





</div>

只需像这样更改你的CSS

html,body{margin: 0;padding: 0;height: 100%;}
.my_office_content{padding: 20px;}
.my_office_content label{width: 250px;font-weight: bold;}
.my_office_border{border-bottom: 1px solid #ccc; display:table;width:100%}
.my_office_border label{float:left; width:30%;}
.my_office_border span{float:right; width:70%;}