Question

我正在尝试使用HTML5和CSS创建一个表。我想用一列单元格将文本的一半左对齐，将文本的右半对齐。

我最近得到的是使用<p>标记，但是文本被分成两行，是否可以对齐对齐拆分单个文本？

span.alignleft {
  text-align: left;
}

span.alignright {
  text-align: right;
}

p.alignleft {
  text-align: left;
}

p.alignright {
  text-align: right;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<!DOCTYPE html>
<html lang='en'>

<head>
  <title>Test Page</title>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Link</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>A</td>
        <td><a href="#"><span class="alignleft">Some Text Align Left</span><span class="alignright">Some Text Align Right</span></a></td>
      </tr>
      <tr>
        <td>B</td>
        <td><a href="#"><span class="alignleft">A</span><span class="alignright">B</span></a></td>
      </tr>
      <tr>
        <td>C</td>
        <td>
          <a href="#">
            <p class="alignleft">A</p>
            <p class="alignright">C</p>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Answer 1

span.alignleft {
  text-align: left;
}

span.alignright {
  text-align: right;
}

.alignleft {
  text-align: left;
}

.alignright {
  text-align: right;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<!DOCTYPE html>
<html lang='en'>

<head>
  <title>Test Page</title>
</head>
<body>
  <title>Test Page</title>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th colspan="2">Link</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>A</td>
        <td colspan="2">
          <a href="#">
          <span class="alignleft">Some Text Align Left</span>
          <span class="alignright">Some Text Align Right</span>
          </a>
        </td>
      </tr>
    <tr>
      <td>B</td>
      <td colspan="2">
        <a href="#">
        <span class="alignleft">A</span>            
        <span class="alignright">B</span>
        </a>
      </td>
    </tr>
  <tr>
    <td>C</td>
    <td class="alignleft"><a href="#">A </a></td>
	  <td class="alignright"><a href="#">C </a></td>
  </tr>
</tbody>
</table>
</body>

</html>

使用rowpan和colspan应该可以解决问题。

Answer 2

    DB.Index<Review>()
      .Key(a => a.Comment, Type.Text)
      .Create();

span.alignleft {
  text-align: left;
  float:left;
}

span.alignright {
  text-align: right;float:right;
}

p.alignleft {
  text-align: left;
}

p.alignright {
  text-align: right;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

使用float可以完成工作！

Answer 3

getUser

span.alignleft {
  text-align: left;
}

span.alignright {
  text-align: right;
}

p.alignleft {
  text-align: left;
}

p.alignright {
  text-align: right;
}
span.pull-right {
  float: right;
}
span.pull-left {
  float: left;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

Answer 4

将类parent添加到a标签中，并添加到CSS下方

.parent {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

span.alignleft {
  text-align: left;
}

span.alignright {
  text-align: right;
}

p.alignleft {
  text-align: left;
}

p.alignright {
  text-align: right;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

.parent {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

<!DOCTYPE html>
<html lang='en'>

<head>
  <title>Test Page</title>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Link</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>A</td>
        <td><a href="#"><span class="alignleft">Some Text Align Left</span><span class="alignright">Some Text Align Right</span></a></td>
      </tr>
      <tr>
        <td>B</td>
        <td><a href="#"><span class="alignleft">A</span><span class="alignright">B</span></a></td>
      </tr>
      <tr>
        <td>C</td>
        <td>
          <a href="#" class="parent">
            <span class="alignleft">A</span>
            <span class="alignright">C</span>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Answer 5

您可以使用Flexbox完成它。注意.split-align类已添加到锚标记。

.split-align {
  display: flex;
  justify-content: space-between;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Link</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td><a href="#" class="split-align"><span class="alignleft">Some Text Align Left</span><span class="alignright">Some Text Align Right</span></a></td>
    </tr>
    <tr>
      <td>B</td>
      <td><a href="#" class="split-align"><span class="alignleft">A</span><span class="alignright">B</span></a></td>
    </tr>
    <tr>
      <td>C</td>
      <td>
        <a href="#" class="split-align">
          <p class="alignleft">A</p>
          <p class="alignright">C</p>
        </a>
      </td>
    </tr>
  </tbody>
</table>

您如何在元素内对齐一半文本？

5 个答案: