html、css：如何在移动的浏览器上使用将标签链接到页面

oo7oh9g9 于 2023-01-06 发布在其他

关注(0)|答案(2)|浏览(172)

我有一个表格和标签下面的HTML。所有项目都在页面上居中，并链接到页面宽度。它在PC上看起来不错，但当我在手机上打开它看起来有点不对，看起来像页面少，但链接到表格宽度，其余项目看起来像在页面上的中心少大小：

请告知如何链接标签到实际的页面宽度，以及如何在实际的页面宽度居中的标题。
CSS：

h1 {

    color: #0b2e13;
    text-align: center;
    font-size: 340%;

}

table {
    text-align: center;
    font-size: 20px;
    margin: auto;
    border: 3px solid darkblue;
    border-collapse: separate;
    border-spacing: 5px 10px;
    width: 1000px;
}

label {
    position: static ;
    width: 95%;
    font-size: 250%;
    margin: 1%;
    white-space: pre-wrap;
    text-align: justify;
    font-weight: bold;

}

HTML太大，简而言之，它：

<h1> CAPTION </h1>
<table>
...
</table>

<label>
...
</label>

css

来源：https://stackoverflow.com/questions/75025270/html-css-how-to-link-label-to-page-with-on-mobile-browsers

2条答案

按热度按时间

5uzkadbs1#

看起来您找到了 * a * 解决方案，但我不确定这是否是您真正想要做的...在大多数情况下，在<body>上设置min-width不是一个好主意。也许这对您来说没问题，但我建议您这样做：

*,
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}
body {
  width: 100%;
  overflow-x: hidden;
}
.table-container {
  overflow-x: scroll;
}
table {
  border-collapse: collapse;
}
caption {
  background-color: lightgreen;
}
td {
  min-width: 60px;
  width: min-content;
  height: 20px;
  border-color: black;
  border-width: 1px;
  border-style: solid;
}
.label {
  background-color: yellow;
  height: 25rem;
  display: grid;
  place-items: center;
}
p {
  text-align: center;
}

<div>

  <div class='table-container'>
    
    <table>
    
      <caption>some text in caption</caption>

      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

    </table>
    
  </div>

  <div class="label">
    <p>some text</p>
  </div>

</div>

当然，我不知道你的全部用途。这只是我的看法。

赞(0）回复(0）举报 2023-01-06

unguejic2#

我找到了解决办法：刚刚添加到css〉〉〉主体{最小宽度：1200 px;}〈〈〈，现在所有元素居中，页面上任意比例，并且不小于表格（1200 -表格总宽度）

赞(0）回复(0）举报 2023-01-06