Question

很抱歉，如果我的问题不清楚。我的意思是让我说我想把三个单词放在一行，但最左边一个，中间一个，最后一个最右边。除了在它们之间放置很多空间（这是一种不专业和有趣的方式），有没有办法指定位置？

我的第一个念头是：

<p>
     <span style="text-align: left">Left</span>
     <span style="text-align: center">Center</span>
     <span style="text-align: right">Right</span>
</p>

显然它不起作用。有什么想法吗？

Answer 1

你是说这个意思吗？

.flex {
  display: flex;
  justify-content: space-between;
}

<p class="flex">
    <span>Left</span>
    <span>Center</span>
    <span>Right</span>
</p>

Answer 2

有很多方法。到目前为止尚未被提及的一些是将第一个跨度向左移动，最后一个向右移动。

＆＃13;

p {
  text-align: center;
}

p > span:first-child {
  float: left;
}

p > span:last-child {
  float: right;
}

＆＃13;

<p>
  <span>Left</span>
  <span>Center</span>
  <span>Right</span>
</p>

＆＃13;

如果跨度全部只包含一个单词，则可以使用text-align和text-align-last 如果它们包含多个单词，您可能还需要更改它们以显示：inline-block以避免拉伸其中的空格。

＆＃13;

p {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
}

＆＃13;

<p>
  <span>Left</span>
  <span>Center</span>
  <span>Right</span>
</p>

＆＃13;

将p更改为表也可以，但不建议这样做。

＆＃13;

p {
  display:table;
  width:100%;
}

p > span {
  display: table-cell;
  text-align: center;
}

p > span:first-child {
  text-align: left;
}

p > span:last-child {
  text-align: right;
}

＆＃13;

<p>
  <span>Left</span>
  <span>Center</span>
  <span>Right</span>
</p>

＆＃13;

较新的方法是使用display:grid。事实上，这是新的，根据您使用的浏览器版本，您需要在浏览器的高级设置中启用此功能。请参阅MDN＆＃39; browser compatibility表的脚注。

＆＃13;

p {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
  grid-columns: repeat(3, 1fr);
  width: 100%;
}

p>span {
  display: block;
}

p>span:nth-child(2) {
  -ms-grid-column: 2;
  grid-column: 2;
  text-align: center;
}

p>span:last-child {
  -ms-grid-column: 3;
  grid-column: 3;
  text-align: right;
}

＆＃13;

<p>
  <span>Left</span>
  <span>Center</span>
  <span>Right</span>
</p>

＆＃13;

Answer 3

您可以尝试使用

<p> 
<span id="left">Left</span> 
<span id="center">Center</span> 
<span id="right">Right</span> 
</p> 

<style>
 #left{ float:left; }
 #center{ padding-left:50px;}//you can adjust the space you want(exp:70px or more) 
 #right{ float:right; } </style>

或

<style>
 #left{ float:left; }
 #center{ padding-left:50px;}//you can adjust the space you want(exp:70px or more) 
 #right{ padding-left:50px; } </style>

Answer 4

将它全部放入div中并将其设置为：

div {
  text-align: justify;
  text-justify: inter-word;
}

有没有办法在HTML中的一行内的不同特定位置放置多个内联元素？

4 个答案: