Question

我试图让网站右侧的抵押贷款计算器适合应该在它周围的方框（div）。你可以看到它是重叠的。

网页：http://www.yourwhiteknight.com/properties/

从下面的代码中可以看出，表的宽度是在table属性（width =＆＃34;＆＃34;）和CSS代码中设置的，但它不符合这些规则。如何强制此表更小？

代码：

<div class="textwidget">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>

<!-- Javascript function is here but no reference to width -->


<form id="mortgageCalculator">

<table border="0" cellpadding="1" style="background-color: #f4f5ed; width:248px" width="248">
    <tbody><tr style="background-color: #496b1f; font-size:11px;">
        <td colspan="2" align="CENTER">
        <b><font color="white">Mortgage Calculator</font></b>
        </td>
    </tr>
    <tr>
        <td colspan="2"> 

            <table border="0" cellpadding="1">
                <tbody><tr>
                    <td colspan="2"><b>Mortgage Data:</b>
                    </td>
                </tr><tr>
                    <td align="RIGHT">House Price ($):
                    </td>
                    <td>


    <input type="TEXT" name="price" value="50000" size="8" onchange="UpdatePrincipal(this.form)" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQV

Q4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
                    </td>
                </tr>
                <tr>
                    <td align="RIGHT">Down Pymt ($):</td>
                    <td>
                         <input type="TEXT" name="down" value="0" size="8" onchange="UpdatePrincipal(this.form)">
                    </td>
                </tr>
                <tr>
                    <td align="right">Principal ($):</td>
                    <td>
                        <input type="text" name="principal" value="50000" size="8" readonly="true" style="background-color: #aaaaaa;">
                    </td>
                </tr>
                <tr>
                    <td align="RIGHT">Annual Int. Rate (%):</td>
                    <td>
                        <input type="TEXT" name="interest" value="8.5" size="5">
                    </td>
                </tr>
                <tr>
                    <td align="RIGHT">Term (Months):</td>
                    <td>
                        <input type="TEXT" name="term" value="120" size="5">
                    </td>
                </tr>
                <tr>
                    <td align="RIGHT">Monthly Pymt:</td>
                    <td>
                        <input type="TEXT" name="monthlyPayment" size="5">
                    </td>
                </tr><tr>
                <td align="RIGHT">Balloon Pymt:</td>
                    <td>
                        <input type="TEXT" name="balloon" size="5">
                    </td>
                </tr>
            </tbody></table>
        </td>
    </tr>
    <tr>
        <td align="CENTER" colspan="2">
            <input type="BUTTON" name="cmdCalc" value="Calculate" onclick="calculate(this.form)">
        </td>
    </tr>
</tbody></table>

</form></div>

Answer 1

该表格只会与其中的内容一样小。您在计算器中的文本输入足够大，以至于它们限制了表格的小小。在这些输入上设置较小的宽度，它应该都很好！

Answer 2

问题出在表格内，输入在那里。你可以添加“宽度：100％;”对输入和问题的解决。

您可以像这样添加css：

#mortgageCalculator input {
   width: 100%;
}

表格没有在我的div中对齐并且比我设置的更宽

2 个答案: