html - 从查询创建按钮数组 - 使用 CSS 调整大小

Question

注意我发现了问题，我以为它只是没有显示第二个词，实际上它不在 CSS 中。我从提交按钮中删除了所有 CSS，但我仍然只显示 robert。 $_post 也只显示 robert如果我

while($row = $rs->fetch_assoc()) {
echo $row['name']."<br>";
}

它确实显示 robert tables 只有当它循环制作按钮时 tables 似乎从名称中删除。如果我将数据库中的名称更改为 robert_tables，则整个名称会显示 OK。我会用一个新问题重新发布这个

---

我第一次尝试使用 CSS，遇到了一种情况，谷歌还没有透露答案。

从查询开始:$query="select name from members where active=1 order by name";

接下来我要创建一个 5 列宽的表格，占页面的 100%，每列占 20%

echo "<form action='individual.php' method='post'>";
$column = 0;
echo "<table class='fullheight' >";

   while($row = $rs->fetch_assoc()) {
        if ($column == 0) {
        echo "<tr>";
        }
    echo "<td class='cellnopad'><input type='submit' class='submitbtn' name='name' value=".$row['name']." ></td>";

    $column++;
        if ($column >= 5) {echo "</tr>";
        $row++;
        $column=0;
        }
    }
    echo "</table>";
echo "</form>";



html{padding:0;
      height:100%;
      border:none;
      }

body {
    background-color: #93929F;
    background-image: url("shield1.png");
    background-repeat: no-repeat;
    background-position: 50% 10%;
    margin:0;
      padding:0;
      height:100%;
      border:none;
    }   

form {
    height: 90%;
    }

.fullheight{
    height:85%;
    width: 100%;
}

.cellnopad{
width: 20%;
padding:0px 0px;
}

/* copied this from an example and tweak*/
.submitbtn{
height:100%;
width: 100%;
opacity: 0.5;
cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
padding:5px 0px; /*add some padding to the inside of the button*/
background:#35b128; /*the colour of the button*/
border:1px solid #33842a; /*required or the default border for the browser will appear*/
/*give the button curved corners, alter the size as required*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/*give the button a drop shadow*/
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
/*style the text*/
color:#f3f3f3;
font-size:1.1em;
}
/***NOW STYLE THE BUTTON'S HOVER AND FOCUS STATES***/
.submitbtn:hover,.submitbtn:focus{
background-color :#399630; /*make the background a little darker*/
/*reduce the drop shadow size to give a pushed button effect*/
-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
opacity: 1;
/*style the text*/
color:#ffff00;
font-size:1.2em;
}

我想保留横跨整个页面的 5 列我希望它根据结果更改“单元格”的数量。我希望按钮是统一的。到目前为止，我已经拥有了所有这些，但是每个按钮中的文本可以超过按钮的尺寸，因此它可以切掉部分名称。例如，robert tables 仅显示 robert

我找不到按钮的自动文本大小设置，是否存在？如果是这样，它是什么，将如何使用？如果能帮助我们更好地完成这项工作，我们将不胜感激，但请记住，我才刚刚开始，所以请采取一些小步骤。

Answer 1

请按如下所示更改结构。

1. #cellnopad to .cellnopad
2. #submitbtn to .submitbtn
3. <td id='cellnopad'> to <td class='cellnopad'>
4. <input type='submit' id='submitbtn' name='name' value=".$row['name']."  to <input type='submit' class='submitbtn' name='name' value=".$row['name']." />
   You also need to close <input> tag.   
5. .submitbtn {
       height: 40px; // instead of height: 100%;
   }

确保您对没有重复的元素使用 ID。每页必须只有一个。

阅读:http://css-tricks.com/the-difference-between-id-and-class/