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

时间:2014-10-28 05:35:47

标签: html css mysqli

注意我发现了这个问题,我认为它只是没有显示第二个单词,它实际上不在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

我无法找到按钮的自动文字大小设置,是否存在?如果是这样的话,它将如何使用? 此外,任何有助于做到这一点的帮助都会受到赞赏,但请记住,我刚刚开始,所以请小步骤。

2 个答案:

答案 0 :(得分:0)

请按以下方式更改结构。

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/

答案 1 :(得分:0)

Kypros能够回答问题Here

value=".$row['name']."必须为value='".$row['name']."'