gpt4 book ai didi

php - CSS/HTML 内联和居中两个单独表单的表单按钮

转载 作者:行者123 更新时间:2023-11-28 18:39:18 24 4
gpt4 key购买 nike

我正在尝试以内联和居中(水平)方式显示两个表单按钮(每个属于一个单独的表单)。
这是我的代码:

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

这工作正常,但我无法将两个按钮居中。我想知道 1) 如何将两个按钮居中以及 2) 是否有更好的方法来内联它们。欣赏它。

编辑:按照 Cynthia 的建议,我将 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 }

谢谢!

最佳答案

给你: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 中的表单,其宽度与两个按钮的组合宽度一样宽。将 display:block 分配给 .center-form DIV 并添加 margin:auto(以便左/右边距将自动调整)。

瞧!

关于php - CSS/HTML 内联和居中两个单独表单的表单按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11955456/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com