ボタンのインラインテキストを持つCSS

Question

htmlでCSSコードを書式設定する際に問題が発生しています。私は '削除'ボタンに沿ってテキストを表示しようとしています。それらのフォーマットを右と1/4のサイズにします。また、 "削除"ボタンを入力テキストボックスに行を付けるために、リストにタグを追加しようとしましたが、希望どおりに出力をフォーマットすることができません。

ここ

は、それが今のようになります。

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

私はドリューケネディに答えなければならないが、彼はオフィを投稿しなかったCEの答えが、彼はコメントを通して私を助けなかった、と私のために働いていたコードはでした：あなたがそれらをフロートすることができ

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%; 
    } 

Answer 2

入力の表示プロパティのインラインブロック値を追加します。

/*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 3

スパンにあなたのテキストを挿入し、次のプロパティでCSSクラスを追加します。また、あなたのボタンに以下を追加し

.myclass{ float: left;} 

と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クラスですクラス：

.buttonclass{ display:block; margin: auto; }