如何在同一行上获得 3 行文本并且仍然能够定位它们？答案

【问题标题】：How can I get 3 lines of text on the same line and still be able to position them?如何在同一行上获得 3 行文本并且仍然能够定位它们？
【发布时间】：2015-08-03 14:47:36
【问题描述】：

制作一个关于页面我正在尝试获取 3 行文本，标题彼此位于同一行，就在带有背景图像的 css 圆圈下方。在此之下，我有一些文本需要使用各自的昵称。我不知道如何让文本在中心等间距。保证金似乎不起作用。让我知道如何做到这一点，如果可能的话。我已经在这个网站和其他多个网站上寻找了几个小时的答案，但还没有找到答案。所以我想我的问题是：我怎样才能在同一行获得 3 行文本并且仍然能够定位它们？`

这是我的代码。请记住，我使用的是骨架响应式网格系统。

#importantpeople {
  text-align: center;
}
#manager-1 {
  font-weight: 500;
  text-align: left;
  margin-left: -2px;
}
#manager-2 {
  font-weight: 500;
  text-align: center;
}
#manager-3 {
  font-weight: 500;
  text-align: right;
  margin-right: 10px;
}

<div class="container">
  <div class="row" id="importantpeople">
    <h4 id="managers-head">Our Managers</h4>
    <div class="one-third.column" id="screamer">
    </div>
    <div class="one-third.column" id="kinzu">
    </div>
    <div class="one-third.column" id="swezii">
    </div>
    <h5 id="manager-1">Screamer</h5>
    <h5 id="manager-2">KINZU</h5>
    <h5 id="manager-3">Swezii</h5>
    <p>Just a guy chilling on his computer creating works of art for people</p>
    <p>I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
    <p>I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
  </div>
</div>

【问题讨论】：

你在使用 Bootstrap 吗？如果是这样，请更新您的问题的标签。
为什么会被否决？
因为也许我们没有全貌，正如我在之前提供的解决方案中已经提到的那样。尝试在 Photoshop 或任何其他图形工具中绘制某种布局，准确指定您需要的内容，然后您一定会得到答案。你的问题比较模糊。
嗯，我还是个孩子，所以这可能就是我含糊不清的原因。我在洛杉矶 8 年级的成绩不是很好。下次我肯定会花更多时间来解释我需要什么。

标签： html css text text-alignment

【解决方案1】：

一种方法是将第一项向左浮动，最后一项向右浮动。请注意，您需要清除段落上的浮动。

#importantpeople {
  text-align: center;
}
#manager-1 {
  font-weight: 500;
  text-align: left;
  margin-left: -2px;
  float: left;
}
#manager-2 {
  font-weight: 500;
  text-align: center;
}
#manager-3 {
  font-weight: 500;
  text-align: right;
  margin-right: 10px;
  float: right;
}
p {
  clear: both;
}
h5 {
  margin: 0;
}

<div class="container">
  <div class="row" id="importantpeople">
    <h4 id="managers-head">Our Managers</h4>
    <div class="one-third.column" id="screamer">
    </div>
    <div class="one-third.column" id="kinzu">
    </div>
    <div class="one-third.column" id="swezii">
    </div>
    <h5 id="manager-1">Screamer</h5>
    <h5 id="manager-3">Swezii</h5>
    <h5 id="manager-2">KINZU</h5>
    <p>Just a guy chilling on his computer creating works of art for people</p>
    <p>I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
    <p>I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
  </div>
</div>

【讨论】：

上面的演示不适合你？你用的是什么浏览器？
工作正常。我注意到你告诉每个人它不起作用。也许问题不在于我们的解决方案？
我是这个网络开发的新手，也许我有语法错误？浮动解决方案似乎在玩弄边距后起作用。我的问题是边距使浮动不在左侧或右侧的 ddirecty 上。感谢您的帮助，这解决了我的问题。

【解决方案2】：

我看到了类似 Bootstrap 的类。为什么不使用您可用的网格？由于.one-third.column 类，我猜你实际上并没有使用 Bootstrap，但这是在你使用的任何网格中应该如何完成的。

<div class="row">
    <div class="col-xs-4 text-left">
        <div class="one-third.column" id="screamer"></div>
         <h5 id="manager-1">Screamer</h5>

    </div>
    <div class="col-xs-4 text-center">
        <div class="one-third.column" id="kinzu"></div>
         <h5 id="manager-2">KINZU</h5>

    </div>
    <div class="col-xs-4 text-right">
        <div class="one-third.column" id="swezii"></div>
         <h5 id="manager-3">Swezii</h5>

    </div>
</div>

Demo

【讨论】：

我知道他说他使用的是骨架响应式网格系统，但我不确定我们是否应该使用 Bootstrap。
我不明白，什么是 col-xs-4 text-left？
col-xs-4 相当于 Bootstrap 的 one-third。 text-center 是您所期望的——它将文本居中应用于其内容。
text-center 不是我正在使用的 gs 的一部分。现在呢？
您似乎掌握了 CSS 的基础知识。所以写一些。 :-) .text-center {text-align: center;}

【解决方案3】：

使用display: inline-block;

#importantpeople {
  text-align: center;
}
.inline-block{
    display: inline-block;  
    width: 32%
}

#manager-1 {
  font-weight: 500;
  text-align: left;
  margin-left: -2px;
}
#manager-2 {
  font-weight: 500;
  text-align: center;
}
#manager-3 {
  font-weight: 500;
  text-align: right;
  margin-right: 10px;
}

<div class="container">
  <div class="row" id="importantpeople">
    <h4 id="managers-head">Our Managers</h4>
    <div class="one-third.column" id="screamer">
    </div>
    <div class="one-third.column" id="kinzu">
    </div>
    <div class="one-third.column" id="swezii">
    </div>
    <h5 id="manager-1" class="inline-block">Screamer</h5>
    <h5 id="manager-2" class="inline-block">KINZU</h5>
    <h5 id="manager-3" class="inline-block">Swezii</h5>
    <p>Just a guy chilling on his computer creating works of art for people</p>
    <p>I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
    <p>I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
  </div>
</div>

【讨论】：

【解决方案4】：

如果您希望标题和段落位于同一行，则必须使用内联显示。但我想我知道你有什么问题要这样做：您需要将每个及其描述放在同一个 div 中

<div id="manager-1div" class="managers">
     <h5 id="manager-1">Screamer</h5>
     <p>Just a guy chilling on his computer creating works of art for people</p></div>
<div id="manager-2div" class="managers">
   <h5 id="manager-2" class="center-us-all">KINZU</h5>
   <p class="center-us-all">I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
</div>
<div id="manager-3div" class="managers">
    <h5 id="manager-3" class="center-us-all">Swezii</h5>  
    <p class="center-us-all">I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
</div>

CSS

.managers{
   display: inline-block;
}
.center-us-all{
   text-align: center;
}

您可以使用以下问题使它们具有相同的高度：Side by side divs with same height

【讨论】：

我在使用这个时无法对齐文本。我如何对齐，因为 text-align 不起作用。我原来有这个 display:inline-block; 但我无法对齐它。
编辑了我的答案，我添加了一个 text-align center us all class 将它们居中。在下面写了css
Text-Align 在 h5s 上不怎么样。我的代码和你的一模一样。

【解决方案5】：

我将所有内容都包装在某种表格中。如果您想在提供的表格单元格中设置边距或以不同方式对齐文本，您可以根据 ID 进行计算。我希望这是您正在寻找的内容，尽管我认为我并没有清楚地了解您的问题。如果您想与下面的段落有相同的内容，只需添加另一个 table-row 类来包装 p。

.table {
  display: table;
  width: 100%;
}
.table-row {
  display: table-row;
  width: 100%;
}
.table-row .column,
.table-row h5 {
  display: table-cell;
  text-align: center;
}

<div class="container">
  <div class="row" id="importantpeople">
    <h4 id="managers-head">Our Managers</h4>
    <div class="table">
      <div class="table-row">
        <div class="one-third column" id="screamer">Some image</div>
        <div class="one-third column" id="kinzu">Other image</div>
        <div class="one-third column" id="swezii">Third image</div>
      </div>
      <div class="table-row">
        <h5 id="manager-1">Screamer</h5>
        <h5 id="manager-2">KINZU</h5>
        <h5 id="manager-3">Swezii</h5>
      </div>
    </div>
    <p>Just a guy chilling on his computer creating works of art for people</p>
    <p>I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
    <p>I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
  </div>
</div>

【讨论】：