Align my text to the left of my right-aligned search button - HTML

Question

I would like to align the label "Filter:" to the left of my search box which has been placed in the right (almost) upper corner. I am not sure how to do it. The label either pops to the left of the page, or to the right of the search box. However, I just want it to be directly on the left side of the search box. I've tried float- and text-align commands but nothing has been successful so far. Does anyone have a tip? Here is my code and the current state of my page. Thanks!

<!DOCTYPE html>
<html>
    <head>
        <title>Zebra Striped Table</title>
    </head>

    <style type="text/css">
        table{
            border-collapse: collapse;
            border-spacing: 0;
            width: 100%;
            border-top: blank;
            border-bottom: 1px;
            border-right: blank
        }

        th, td{
            text-align: left;
            padding:  16px;
            border-bottom: solid
        }

        tr:nth-child(even){
            background-color: #f2f2f2;
        }

        label {
            display: inline-block;
            text-align: center;
        }

        .wrapper {
            text-align: center;
        }
    </style>

    <body>
        <p style="text-align:center">Thanks for giving your reviews</p>

        <!---Table Data--->

        <div class="container">

            <label>Filter: </label> <input type="text" id="myInput" onkeyup='tableSearch()' placeholder="Set" style="float: right">

            <table class="table" id="myTable" data-filter-control="true" data-show-search-clear-button="true">
                <tr>
                    <th>Set</th>
                    <th>Day</th>
                    <th>Dj</th>
                    <th>Rating</th>
                    <th>Comment</th>
                </tr>

                <tr>
                    <td>1</td>
                    <td>Friday</td>
                    <td>Wow</td>
                    <td>3</td>
                    <td>24</td>
                </tr>

                <tr>
                    <td>2</td>
                    <td>Saturday</td>
                    <td>Wow</td>
                    <td>3</td>
                    <td>24</td>
                </tr>

                <tr>
                    <td>3</td>
                    <td>Saturday</td>
                    <td>Wow</td>
                    <td>3</td>
                    <td>24</td>
                </tr>

                <tr>
                    <td>4</td>
                    <td>Sunday</td>
                    <td>Wow</td>
                    <td>3</td>
                    <td>24</td>
                </tr>
            </table>
            <br>

            <div class="wrapper">
                <button class="button">Add your review</button>
            </div>
        </button>

        <p style="text-align:center">See you again in 2022!</p>

        <script type="application/javascript">
        function tableSearch(){
            let input, filter, table, tr, td, txtValue;

            //Initialising variables
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            table = document.getElementById("myTable");
            tr = table.getElementsByTagName("tr");

            for(let i = 0; i < tr.length; i++){
                td = tr[i].getElementsByTagName("td")[0];
                if (td) {
                    txtValue = td.textContent || td.innerText;
                    if(txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else { 
                        tr[i].style.display = "none";
                    }
                }
            }


            }
        </script>

    </body>
</html>

score 0 · Answer 1 · answered Sep 13 '21 at 00:21

you need to put label and searchbox into a div:

<div style="width: 30%; float:right; text-align:left;">
    <label for="myInput" style="width:100%;">Filter: </label>
    <input type="text" id="myInput" onkeyup='tableSearch()' placeholder="Set" style="width:100%;">
</div>

Bdeering · Answer 2 · 2021-09-13T00:42:17.353

0

Switch the order of the input and label tags, then give the label float: right. It's also best practice to give your labels a for property that matches the id of the input.

<input type="text" id="myInput" onkeyup='tableSearch()' placeholder="Set" style="float: right">
<label for="myInput">Filter: </label>

label {
  display: inline-block;
  float: right;
}

On a side note, display: inline-block is unnecessary here unless you plan on giving your label width and height. Feel free to read this post for more info on inline-block.

edited Sep 13 '21 at 00:42

answered Sep 13 '21 at 00:31

Bdeering

338
3
14

Thanks a lot. It was very helpful! Also for the source. – Iris S. Sep 13 '21 at 05:58

score 0 · Answer 3 · edited Sep 14 '21 at 06:30

Just wrap the title and input search in a div and float to the right.

<!DOCTYPE html>
<html>

<head>
    <title>Zebra Striped Table</title>
</head>

<style type="text/css">
    table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        border-top: blank;
        border-bottom: 1px;
        border-right: blank
    }

    th,
    td {
        text-align: left;
        padding: 16px;
        border-bottom: solid
    }

    tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    label {
        display: inline-block;
        text-align: center;
    }

    .wrapper {
        text-align: center;
    }
</style>

<body>
    <p style="text-align:center">Thanks for giving your reviews</p>

    <!---Table Data--->

    <div class="container">
        <div style="float: right">
            <label>Filter: </label> <input type="text" id="myInput" onkeyup='tableSearch()' placeholder="Set">
        </div>
        <table class="table" id="myTable" data-filter-control="true" data-show-search-clear-button="true">
            <tr>
                <th>Set</th>
                <th>Day</th>
                <th>Dj</th>
                <th>Rating</th>
                <th>Comment</th>
            </tr>

            <tr>
                <td>1</td>
                <td>Friday</td>
                <td>Wow</td>
                <td>3</td>
                <td>24</td>
            </tr>

            <tr>
                <td>2</td>
                <td>Saturday</td>
                <td>Wow</td>
                <td>3</td>
                <td>24</td>
            </tr>

            <tr>
                <td>3</td>
                <td>Saturday</td>
                <td>Wow</td>
                <td>3</td>
                <td>24</td>
            </tr>

            <tr>
                <td>4</td>
                <td>Sunday</td>
                <td>Wow</td>
                <td>3</td>
                <td>24</td>
            </tr>
        </table>
        <br>

        <div class="wrapper">
            <button class="button">Add your review</button>
        </div>
        </button>

        <p style="text-align:center">See you again in 2022!</p>

        <script type="application/javascript">
            function tableSearch() {
                let input, filter, table, tr, td, txtValue;

                //Initialising variables
                input = document.getElementById("myInput");
                filter = input.value.toUpperCase();
                table = document.getElementById("myTable");
                tr = table.getElementsByTagName("tr");

                for (let i = 0; i < tr.length; i++) {
                    td = tr[i].getElementsByTagName("td")[0];
                    if (td) {
                        txtValue = td.textContent || td.innerText;
                        if (txtValue.toUpperCase().indexOf(filter) > -1) {
                            tr[i].style.display = "";
                        } else {
                            tr[i].style.display = "none";
                        }
                    }
                }

            }
        </script>

</body>

</html>

Align my text to the left of my right-aligned search button - HTML

3 Answers3