HTML/CSS 按钮位置？答案

【问题标题】：HTML/CSS button position?HTML/CSS 按钮位置？
【发布时间】：2015-04-18 20:06:00
【问题描述】：

我有一个我似乎无法解决的问题，我刚开始学习html/css/php，所以请理解我的菜鸟性:)

想象一个网站，在该网站上有 8 个按钮（每个按钮都是一个特定的选择）。

我不想将它们平等地放在彼此下方和旁边。所以是这样的：

[][]

[] []

但我的问题是，当我放弃 css 样式位置时，按钮确实占据了该特定位置，但是按钮的 href 将不再起作用。有什么问题？

有没有办法将 .btn 类放在顶部和右侧？我不这么认为，因为我希望 8 个按钮有不同的位置。我认为 "style="top;对；”正在干扰课堂。

<html>
<head>
<style type="text/css">
body{
    background-image: url("images/bg.jpg");
    background-color: #844903;
    }
    .logo{
    position: absolute;
    top: 40px;
    right: 850px;
    }
    h1{
    position: absolute;
    top: 250px;
    right: 870px;
    color: #a86b00;
    }  
    .btn {
        -moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
        -webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
        box-shadow:inset 0px 1px 0px 0px #fce2c1;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25));
        background:-moz-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
        background:-webkit-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
        background:-o-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
        background:-ms-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
        background:linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25',GradientType=0);
        background-color:#ffc477;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        border:1px solid #eeb44f;
        display:inline-block;
        cursor:pointer;
        color:#ffffff;
        font-family:Courier New;
        font-size:20px;
        font-weight:bold;
        padding:17px 24px;
        text-decoration:none;
        text-shadow:0px 1px 0px #cc9f52;
    }
    .btn:hover {
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477));
        background:-moz-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
        background:-webkit-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
        background:-o-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
        background:-ms-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
        background:linear-gradient(to bottom, #fb9e25 5%, #ffc477 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477',GradientType=0);
        background-color:#fb9e25;
    }
    .btn:active {
        position:relative;
        top:1px;
</style>
<title></title>
</head>

<body>
    <h1>Please pick a location:</h1>

    <div class="logo"><img src="images/logo.jpg" alt="logo"></div>

     <table>
    <tr>
    <td style="top: 450px; right: 1200px;" href="#" class="btn">1 - 3</td>
    </tr>
    <tr>
    <td style="top: 450px; right: 1050px;" href="#" class="btn">4 - 6</td>
    </tr>
     <tr>
    <td style="top: 540px; right: 1200px;" href="#" class="btn">7 - 9</td>
    </tr>
     <tr>
    <td style="top: 540px; right: 1050px;" href="#" class="btn">10+</td>
    </tr>
    </table>

</body>
</html>

http://jsfiddle.net/g1mueuds/

非常感谢您的宝贵时间！

-M

【问题讨论】：

您不能绝对定位 tds 并且 href 不是 td 的可接受属性
href 不适用于 td 元素，仅适用于 a 元素。还值得注意的是，表格是用于表格数据的，现在仅将它们用于布局被认为是不好的做法。

标签： html css button

【解决方案1】：

<table>
    <tr>
        <td><button><a href="#">1</a></button></td>
        <td><button><a href="#">2</a></button></td>
    </tr>
    <tr>
        <td><button><a href="#">3</a></button></td>
        <td><button><a href="#">4</a></button></td>
    </tr>
    <tr>
        <td><button><a href="#">5</a></button></td>
        <td><button><a href="#">6</a></button></td>
    </tr>
    <tr>
        <td><button><a href="#">7</a></button></td>
        <td><button><a href="#">8</a></button></td>
    </tr>
</table>

你去。

编辑：如果你想为按钮设置样式，给它们一个类或 id 并在你的 CSS 文件中使用它。即，您可以使用边距和填充来控制按钮的位置。

【讨论】：

请在下方查看我的评论
聚成一团是什么意思？
它在我的网页左上角显示我所有的按钮。
如果您希望按钮位于不同的位置，则为您的表格指定一个类并使用边距将其对齐到您想要的位置。例如：jsfiddle.net/0Lvfxq01
非常感谢您的宝贵时间，我会努力的！ ;)

【解决方案2】：

尝试使用 display:block 并显示 display:inline-block 。其次，您应该使用<a> 标签。将 <a> 标签放在带有 href 属性的 <td> 标签内。类似<td><a href="#">7</a></td>

【讨论】：

【解决方案3】：

@odedta：

您所展示的内容似乎很合乎逻辑，但是当我尝试它时，它会弄乱我的按钮：

<table>
    <tr>
        <td><button class="btn"><a href="participants.html">Table 2</a></button></td>
        <td><button class="btn"><a href="participants.html">Table 4</a></button></td>
    </tr>
    <tr>
        <td><button class="btn"><a href="participants.html">Table 7</a></button></td>
        <td><button class="btn"><a href="participants.html">Table 8</a></button></td>
    </tr>
    <tr>
        <td><button class="btn"><a href="participants.html">F1.12</a></button></td>
        <td><button class="btn"><a href="participants.html">F3.02</a></button></td>
    </tr>
    <tr>
        <td><button class="btn"><a href="participants.html">E2.40</a></button></td>
        <td><button class="btn"><a href="participants.html">E2.42</a></button></td>
    </tr>
</table>

【讨论】：