简体   繁体   中英

Force break line after form to a table - html

I have two forms which are on the same block. I want to put an table after it but it doesnt get on a new line and sticks to the second form. See picture , in the picture you can see the last element showing as Cry and Lite ... that is the table which is not getting line break. I have the following code:-

<div style="display: flex;">
<form name="myform" method="post" action="usdbtc.php" style="float:left;">
    <div id="log_err"> <strong>
            <?php if(isset($eroor)) { echo $eroor; } ?>
            <?php if(isset($tm)) { echo $tm; } ?>
            <?php if(isset($tah)) { echo $tah; } ?>
            <?php if($au == 1) { echo 'Please log in to trade.';} ?></strong> </div>
    <p><label style="float: left;">Price:</label><input class="input101" style="float: left;" type="text" name="uprice"
            id="box1" oninput="calculate()"><label style="float: right;">:
            <?php echo $market; ?></label><input class="input101" style="float: right;" type="text" name="uam" id="box2" oninput="calculate()">
        <br><input class="input101" style="float: right;" type="text" name="utam" id="result"><br><label style="padding: 10px;">Total
            <?php echo $bm; ?>:</label>
        <td rowspan="2">
            <input type="hidden" name="myform" value="1">
            <br><span class="orderbutton" type="submit" id="ordersell" onclick="myform.submit()">SELL</span></p>
    </td>

</form>
<form name="yourform" method="post" action="usdbtc.php" style="float:right;">
    <div id="log_err"> <strong>
            <?php if(isset($eroor)) { echo $eroor; } ?>
            <?php if($au == 1) { echo 'Please log in to trade.';} ?></strong> </div>
    <p><label style="float: left;">Price:</label><input class="input101" style="float: left;" type="text" name="username"
            id="box3" oninput="calculate()"><label style="float: right;">:
            <?php echo $market; ?></label><input class="input101" style="float: right;" type="text" name="username" id="box4" oninput="calculate()">
        <br><input class="input101" style="float: right;" type="text" name="username" id="resul"><br><label style="padding: 10px;">Total
            <?php echo $bm; ?>:</label>
        <td rowspan="2">
            <input type="hidden" name="yourform" value="1">
            <br>
            <span class="orderbutton" type="submit" id="orderbuy" onclick="yourform.submit()">BUY</span></p>
    </td>

</form>
<div class="abcd">
    <div class="panel-body">
        <div class="data-table">
            <table class="table table-striped table-bordered table-hover" id="btcaddresses">


                <thead>
                    <tr>
                        <th>Crypto</th>

                </thead>
                <tbody>
                    <tr>
                        <td>
                            <img src="images/Mltc.png" width="20" height="20" style="margin-right: 5px; ">Litecoin</td>
                    </tr>
                    </tr>

                </tbody>

            </table>
        </div>

UPDATE I found the error myself. Division with style="display: flex was ending after table causing the problem just removed a </div> at last and placed it after second </form>

Your HTML is, I'm sorry to say this, horrendous. Tags are not closed properly, some tags are not even closed. Tables act funny in HTML that if you don't close them, non-table tags appear above the table. I fixed up your HTML, it should work better for you.

<div style="display: flex;">
    <form name="myform" method="post" action="usdbtc.php" style="float:left;">
        <div id="log_err"> <strong><?php if(isset($eroor)) { echo $eroor; } ?><?php if(isset($tm)) { echo $tm; } ?><?php if(isset($tah)) { echo $tah; } ?><?php if($au == 1) { echo 'Please log in to trade.';} ?></strong> </div>  
        <p>
            <label style="float: left;">Price:</label>
            <input class="input101" style="float: left;" type="text" name="uprice" id="box1" oninput="calculate()">
            <label style="float: right;">: <?php echo $market; ?></label>
            <input class="input101" style="float: right;" type="text" name="uam" id="box2" oninput="calculate()"><br>
            <input class="input101" style="float: right;" type="text" name="utam" id="result"><br><label style="padding: 10px;">Total <?php echo $bm; ?>:</label>
            <td rowspan="2">
                <input type="hidden" name="myform" value="1">
                <br>
                <span class="orderbutton" type="submit" id="ordersell" onclick="myform.submit()">SELL</span>
            </td>
        </p>

    </form>
    <form name="yourform" method="post" action="usdbtc.php" style="float:right;">
        <div id="log_err">
            <strong><?php if(isset($eroor)) { echo $eroor; } ?><?php if($au == 1) { echo 'Please log in to trade.';} ?></strong> 
        </div>  
        <p>
            <label style="float: left;">Price:</label>
            <input class="input101" style="float: left;" type="text" name="username" id="box3" oninput="calculate()">
            <label style="float: right;">: <?php echo $market; ?></label>
            <input class="input101" style="float: right;" type="text" name="username" id="box4" oninput="calculate()"><br>
            <input class="input101" style="float: right;" type="text" name="username" id="resul"><br>
            <label style="padding: 10px;">Total <?php echo $bm; ?>:</label>
            <td rowspan="2">
                <input type="hidden" name="yourform" value="1">
                <br>
                <span class="orderbutton" type="submit" id="orderbuy" onclick="yourform.submit()">BUY</span>
            </td>
        </p>
    </form>
    <div class="abcd"></div>
    <div class="panel-body">
        <div class="data-table">
            <table class="table table-striped table-bordered table-hover" id="btcaddresses">
                <thead>
                    <tr>
                        <th>Crypto</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <img src="images/Mltc.png" width="20" height="20" style="margin-right: 5px; ">
                            Litecoin
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM