Question

页面位于此处：http://macrorevolution.com/calculators/bmr/

如何在输入[文本]框后创建空间。例如，我想在输入框和“Years”，“ft”，“In”。“k / cal per day”之间创建1px间距。

我尝试使用.ipadding但是没有用，所以忽略它。另外，如何将所有输入框更接近“年龄”，“高度”，“重量”？

我是html / css的新手。

<?php
$answer = "";
$agev = "";
$feetv = "";
$inchesv = "";
$weightv = "";
$sex = "";
if(isset($_POST['agev']) && isset($_POST['feetv']) && isset($_POST['inchesv']) && isset($_POST['weightv']) && isset($_POST['sex'])) {
    $agev = $_POST['agev'];
    $feetv = $_POST['feetv'];
    $inchesv = $_POST['inchesv'];
    $weightv = $_POST['weightv'];
    $sex = $_POST['sex'];
    $totalheightv = $inchesv + ($feetv*12);
    $heightcm = $totalheightv*2.54;
    $weightkg = $weightv/2.2;
    if($sex=='male') $answer = round((66.47 + (13.75*$weightkg) + (5*$heightcm) - (6.75*$agev)),0);
    if($sex=='female') $answer = round((665.09 + (9.56*$weightkg) + (1.84*$heightcm) - (4.67*$agev)),0);

}
?>


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Basal Metabolic Rate Calculator</title>
<style>
  table {
      border: 30px;
    font-size:13px;
    font-family: 'PT Sans', sans-serif;
    background-color:#FFFFFF;
  }
tr.spaceUnder > td
{
  padding:0em 1em 1em 0em;

}
p.ss {
    font-size:30px; 
}
.ipadding {
    padding:1px;
}

</style>
</head>
<body>
<div class="box pt20">
<p class="ss">MacroRevolution BMR Calculator</p><br>
<table width='80%' style="margin: 0 auto;">
    <tr class="spaceUnder">
    <td colspan="4">
BMR = Basal Metabolic Rate (similar to RMR = Resting Metabolic Rate). Your BMR represents the number of calories your body burns at rest. Regular routine of cardiovascular exercise can increase your BMR, improving your health and fitness when your body's ability to burn energy gradually slows down.
    </td>
    </tr>
</table>

<form method='post' action=''>
<table width='80%' style="margin: 0 auto;">


    <tr class="spaceUnder">
        <td>Age:</td>
        <td><input type='text' name='agev' value="<?php echo $agev; ?>"/>Years</td>
    </tr>
    <tr class="spaceUnder">
        <td>Height:</td>
        <td align="justify"><input type='text' name='feetv' value="<?php echo $feetv; ?>"/>Ft<p>   </p>

        <input type='text' name='inchesv' value="<?php echo $inchesv; ?>"/>In</td>
    </tr>
    <tr class="spaceUnder">
        <td>Weight:</td>
        <td align="left"><input type='text' name='weightv' value="<?php echo $weightv; ?>"/>lbs</td>
    </tr>
    <tr class="spaceUnder">
        <td colspan="2"><input type='radio' name='sex' value='male'>Male
                        <input type='radio' name='sex' value='female'>Female</td>
    </tr>
    <tr class="spaceUnder">
        <td colspan="2"><input type='submit' class="button highlight small" value='Calculate'/></td>
    </tr>
    <tr class="spaceUnder">
        <td colspan="2">Your BMR is <input type='text' style="width: 50px;" value='<?php echo $answer?>' />k/cal per day  </td>
    </tr>

</table>
</form>


<table border='0' width='80%' style="margin: 0 auto;">
    <td colspan="4">

    Formula for BMR
    If you want to manually calculate your BMR, use the (<a href="http://en.wikipedia.org/wiki/Harris%E2%80%93Benedict_equation">Harris-Benedict formula</a>) <br> below. <br><br>
Men: BMR=66.47+ (13.75 x W) + (5.0 x H) - (6.75 x A) <br>
Women: BMR=665.09 + (9.56 x W) + (1.84 x H) - (4.67 x A) <br><br>

    W = Weight in kilograms (lbs/2.2)<br>
    H = Height in centimeters (inches x 2.54)<br>
    A = Age in years <br><br><br>
    </td>
</table>
</div>

</body>
</html>

Answer 1

在右侧放置一个保证金。

input {
margin-right:5px;
}

Answer 2

使用：

input{
margin-right:1px;
}

将文本框放在标签附近时，请将它们放在同一个标签中。

See this Fiddle

Answer 3

有很多方法，一个是：

input[type="text"] {margin-right:1px;}
input[type="radio"] {margin-right:5px;}
.spaceUnder td:first-child {width:50px;}

Answer 4

只需按照图片创建一个新的css规则并更新css规则。希望它会有所帮助！

步骤：1

enter image description here

<强>步骤：2

enter image description here

HTML在输入文本周围创建空间？

4 个答案:

See this Fiddle