Question

https://jsfiddle.net/tbnzaga9/

#smenu a {
  color: black;
  text-decoration: none;
}

.button:hover {
  background-color: #A9A9A9;
}

.button {
  position: absolute;
  border: 1px solid black;
  cursor: pointer;
  background-color: #d3d3d3;
  width: 30%;
  left: 1%;
}

.right {
  position: absolute;
  right: 60%;
}

#smenu table tr td p {
  display: inline-block;
  float: left;
}

<div id='smenu'>
  <table>
    <tr>
      <th> Title</th>
      <th class='right'> Date</th>
    </tr>
    <tr>
      <td class='button'><a href="gradecalc.html">test</a></td>
      <td class='right'>
        <p>4/27</p>
      </td>
    </tr>
  </table>
</div>

我正在列出单独的网站及其制作日期，但我无法让他们排队！我尝试了float:left和display: inline-block，但它没有排队。有什么建议吗？

另外 - 有没有比使用表更好的方法？

Answer 1

尝试将<p></p>替换为<div></div>或使用css重置表清除执行换行符的段落。此外，我认为表可以做这样的事情，但限制你更多。如果你真的想要你可以模仿一个带有行的div的表，并且每行都有你的列，你可以按行和按行在不同的行中有不同的类。

Answer 2

在CSS中尝试这些更改。

    #smenu a {
      color: black;
      text-decoration: none;
    }
    .button:hover {
      background-color: #A9A9A9;
    }
    .button {
      border: 1px solid black;
      cursor: pointer;
      background-color: #d3d3d3;
    }
    td {
      text-align: center;
      width: 200px;
      height:25px;
    }
    #smenu table tr td p {
      //display: inline-block;
      //float: left;
    }

Answer 3

我会删除所有＆＃34;位置：绝对＆＃34;。鉴于您有表格数据，只需使用常规表格标记即可。

我还添加了以下样式：

.right {
  padding-right: 60%;
}

#smenu table {
  width:100%;
}
 .right p {
   margin:0px;
 }

 th {
   text-align: left;
 }

您可以在此处查看更改： https://jsfiddle.net/tbnzaga9/2/

表格的水平阵容不正确

3 个答案: