1

2 つのフォーム ボタン (それぞれ別のフォームに属する) をインラインで中央揃え (水平方向) に表示しようとしています。
これが私のコードです： 

<div>

<?php
    if(($id && $upperConvLim) || ($id && !$upperConvLim && !$lowerConvLim)){
?>

    <span> &nbsp;&nbsp;&nbsp; </span>
    <form method="post" action="index.php" class="previous">
        <input type="submit" value="Previous" name="submit1" />
        <?php echo '<input type = "hidden" value="'.$id.'"name = "id" />'; ?>
        <?php echo '<input type = "hidden" value="'.$previous.'"name = "previous" />'; ?    >
    </form>

<?php
    }
    if(($id && $lowerConvLim) || ($id && !$upperConvLim && !$lowerConvLim)){
?>

    <span> &nbsp;&nbsp;&nbsp; </span>
    <form method="post" action="index.php" class="next">
        <input type="submit" value="Next" name="submit2" />
        <?php echo '<input type = "hidden" value="'.$id.'"name = "id" />'; ?>
        <?php echo '<input type = "hidden" value="'.$next.'"name = "next" />'; ?>
    </form>

<?php
    }
?>  

</div>

CSSで次を使用してインライン化しようとしましたが、

form, form div {
    display: inline-block;
}

これは正常に機能しますが、2 つのボタンを中央に配置できません。1）2つのボタンを中央に配置する方法と、2）それらをインライン化するより良い方法があるかどうかの両方を知りたいです。感謝します。

編集: シンシアの提案に従って、php/html コードを次のように変更しました。 

<div class="center-form">
<?php
if(($id && $upperConvLim) || ($id && !$upperConvLim && !$lowerConvLim)){
?>
<span> &nbsp;&nbsp;&nbsp; </span>

<form method="post" action="index.php" class="hform">
        <input type="submit" value="Previous" name="submit1" />
        <?php echo '<input type = "hidden" value="'.$id.'"name = "id" />'; ?>
        <?php echo '<input type = "hidden" value="'.$previous.'"name = "previous" />'; ?>
</form>

<?php
}

if(($id && $lowerConvLim) || ($id && !$upperConvLim && !$lowerConvLim)){
?>

<span> &nbsp;&nbsp;&nbsp; </span>

<form method="post" action="index.php" class="hform">
        <input type="submit" value="Next" name="submit2" />
        <?php echo '<input type = "hidden" value="'.$id.'"name = "id" />'; ?>
        <?php echo '<input type = "hidden" value="'.$next.'"name = "next" />'; ?>
</form>


<?php

}

?>
</div>

そして私の新しいCSS：

table {
font-family: Verdana;
font-size: 10pt
}


#table4 {
margin-left: auto;
margin-right: auto;
border:1px solid black;
width :70%;
padding:10px;
background-color:#FAFAD2;
}


#table3 {
margin-left: auto;
margin-right: auto;
border:1px solid black;
width :60%;
padding:10px;
background-color:#FFDAB9;
}

/*
form, form div {

  display: inline-block;
  text-align: center;
}
*/

.center-form { display:block ; width:165px ; margin:auto }

form.hform { display:inline }

input[type=submit] { padding:4px 0 ; width:80px }

ありがとう！

4

2 に答える 2

1

どうぞ: http://jsfiddle.net/myQtb/

手短に：

省略された HTML コードは次のとおりです (ベアボーン フォームを使用しただけです)。

<div class="center-form">
<form class="hform">
<input type="submit" name="submit" value="Submit">
</form>

<form class="hform">
    <input type="submit" name="submit" value="Reset">
</form>
</div>​

CSSは次のとおりです。

.center-form { display:block ; width:165px ; margin:auto }
form.hform { display:inline }
input[type=submit] { padding:4px 0 ; width:80px }​

機能する理由:

フォーム タグのスタイルをinline-blockから単に に変更しますinline。.center-form次に、両方のボタンを合わせた幅と同じ幅の DIV で BOTH フォームを囲みます。DIV に割り当てdisplay:blockて.center-form追加margin:autoします (左右のマージンが自動調整されるように)。

そして出来上がり！

于 2012-08-14T15:19:46.860 に答える
0

これにより、div またはフォーム内のすべての要素が中央に配置されます。

form, form div {
   text-align: center;
}
于 2012-08-14T15:17:59.863 に答える