Question

我在使用html格式化一些CSS代码时出现问题。我想让文字符合“删除”字样。纽扣。让它们格式化，向右和1/4大小。还要删除＆＃34;删除＆＃34;按钮到输入文本框的一行我试图将标签添加到列表但我似乎无法根据需要格式化输出。

现在看来是这样的：

HTML：

        while ($row = mysql_fetch_array($query)) 
        {


            echo "<form action='add_series.php' name='delete_list' method='POST'>";
            echo $row['series'] . " ";
            echo "<input type='hidden' name='delete_series' value=' " . $row['id'] . "' />";
            echo "<input type='submit' name='submit' value='Delete'>";
            echo "</form>";


        }

    echo "</form>";

CSS：

body {
    background-color:lightgray; 
    font-family:Verdana, Arial, Helvetica, sans-serif;  
}

h1 {
    color: black;
    text-align: center;
}

p {
    color: black;
}

html {
    text-align: center;
}

#login
{
  width:30%;
  margin:auto;
  padding:30px 10px 10px 10px;
  background-repeat:no-repeat;
  background-color: lightgray;
}

.picture
{
  width:216px;
  height:185px;
  content:url('images/NHCM_Logo.png');
  margin: 0 auto;
  padding-bottom: 50px;
}

#login label
{
  display:block;  
  margin-bottom:.25em;
  text-align: left;
}

#login input[type="text"], #login input[type="password"], #login    input[type="submit"]
{
  width:100%;
  margin-bottom:0.5em;
}


input[type=text], input[type=date], input[type=password] {
    width: 30%;
    height: 50px;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

input[type=submit] {
    width: 30%;
    height: 50px;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

#service_type, #series, #speaker, #users {
    width: 30%;
    height: 50px;

}

Answer 1

为输入的显示属性添加内联块值：

 /*input {
   display:inline-block;
 }*/

 input[type=submit] {
    display:inline-block;
     width: 30%;
     height: 50px;
     background-color: #4CAF50;
     border: none;
     color: white;
     padding: 16px 32px;
     text-decoration: none;
     margin: 4px 2px;
     cursor: pointer;
 }

 #name1234 {display: inline-block}

注意：删除按钮之前的前一个元素也应该是内联块。

Answer 2

将文本插入范围并添加具有以下属性的css类：

int-test

这是css类：

while ($row = mysql_fetch_array($query)) 
    {


        echo "<form action='add_series.php' name='delete_list' method='POST'>";
        echo $row['series'] . " ";
        echo "<div>";
        echo "<span class='myclass'>Some Text</span>";
        echo "<input type='hidden' name='delete_series' value=' " . $row['id'] . "' />";
        echo "<input type='submit' class='buttonclass' name='submit' value='Delete'>";
        echo "</div>";
        echo "</form>";


    }

echo "</form>";

同时将以下内容添加到按钮并跨越css类：

.myclass{ float: left;}

Answer 3

我必须给Drew Kennedy答案，他没有发表办公室答复，但他确实通过评论帮助我，而且对我有用的代码是：

HTML

        echo "<div class='list_container'>";
        while ($row = mysql_fetch_array($query)) 
        {
            echo "<form action='add_series.php' method='POST'>";
            echo "<div class='delete_list'>";
            echo "<label>" . $row['series'] . "</label>";
            echo "<input type='hidden' name='delete_series' value=' " . $row['id'] . "' />";
            echo "<input type='submit' name='delete_list_button' class='delete_list_button' value='Delete'>";
            echo "</div>";
            echo "</form>";

        }
    echo "<div>";
?>

CSS

.delete_list {
  margin: 10px 0;
  display: table;
  table-layout: fixed;
  width: 100%;
}

.delete_list_button {
  border: none;
  padding: 25px;
  color: #fff;
  cursor: pointer;
  table-layout: fixed;
}

.delete_list>label {
  width: 80%;
  margin-right: 25px;
  word-wrap: break-word;
  word-break: break-all;
  display: table-cell;
  table-layout: fixed;
  vertical-align: middle;
  text-align:left;
  text-indent: 50px;
}

.delete_list>.delete_list_button {
  width: 100%;
  display: table-cell;
}

.list_container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

  .list_container {
    width: 40%;
  }

CSS具有内联文本的按钮

3 个答案: