Question

我一直在尝试在CSS中使用文本对齐中心来调整我的表单无济于事。我已经从下面的代码中省略了CSS。字体样式在我想要的和我拥有的东西之间看起来也不同。我也不知道如何更改CSS中的字体样式。这是我的html表单：

                <!DOCTYPE html>
                <html lang="en">
                <head>
                <title>Add/Edit Supplier</title>
                <style>
                </style>
                </head>
                <body>
                <strong>Add/Edit Supplier</strong><hr>

                <?php
                echo form_open('supplier/save', array('name' => 'supplier_add'));    
                ?>

                <label>Supplier</label>
                <input type="text" name="supplier" id="supplier"> <br/>

                <label>PIN</label>
                <input type="text" name="taxpin" id="taxpin"> <br/>

                <label>Contact</label>
                <input type="text" name="contact" id="contact"> <br/>

                <label>Address</label>
                <textarea  name="addresss" id="addresss"></textarea> <br/>

                <label>City</label>
                <select name="citys" id="citys">>
                <option value="">All</option>
                <?php

                foreach($cities as $city)
                {
                echo '<option value="'.$city['cityidd'].'">'.$city['city'].'</option>';
                }
                ?>  
                </select> <br/>


                <label>Telephone</label>
                <input type="text" name="telephone" id="telephone"> <br/>

                <label>Email</label>
                <input type="text" name="email" id="email"> <br/>

                <label>Website</label>
                <input type="text" name="website" id="website"> <br/>

                <label>Payment Mode</label>
                <select name="paymentmodes" id="paymentmodes">>
                <option value="">--Please select--</option>
                <?php
                foreach($modes as $mode)
                {
                echo "<option value='".$mode['id']."'>".$mode['paymentmode']."</option>";
                }
                ?>  
                </select> <br/>

                <label>KES Account</label>
                <input type="number" name="kesaccount" id="kesaccount"> <br/>

                <label>USD Account</label>
                <input type="number" name="usdaccount" id="usdaccount"> <br/>

                <label>Bank</label>
                <select name="banks" id="banks">
                <option value="">--Please select--</option>
                <?php
                foreach($banks as $bank)
                {
                echo '<option value="'.$bank['id'].'">'.$bank['bankname'].'</option>';

                }
                ?>  
                </select> <br/>

                <label>Bank Branch</label>
                <select name="bankbranches" id="bankbranches">
                <option value=""></option>
                </select> <br/>

                <script type= text/javascript>
                $('#banks').on('change', function() {
                var bank = $(this).val();
                $.ajax({
                type: 'post',
                url: 'supplier/get_branches',
                data: { bank_id : bank },
                success: function (response) {
                $('#bankbranches').html(response); 
                }
                });
                });
                </script>

                <label>Bank Branch Code</label>
                <input type="number" name="bankcode" id="bankcode"> <br/>

                <label>SWIFT</label>
                <input type="text" name="swiftcode" id="swiftcode"> <br/>

                <label>Mobile Payment Number</label>
                <input type="number" name="mobilepaymentnumber" id="mobilepaymentnumber"> <br/>

                <label>Mobile Payment Name</label>
                <input type="number" name="mobilepaymentname" id="mobilepaymentname"> <br/>

                <label>Cheque Addressee</label>
                <input type="number" name="chequeddressee" id="chequeaddressee"> <br/>

                <label>Status</label>
                <input type="radio" name="status" value="1" checked="checked">Yes
                <input type="radio" name="status" value="0">No <br/>

                <label>Category</label>
                <select name="categorysuppliers" id="categorysuppliers">
                <option value="">--Please select--</option>
                <?php
                foreach($categories as $category)
                {
                echo '<option value="'.$category['id'].'">'.$category['supplycategory'].'</option>';
                }
                ?>  
                </select> <br/>

                <label>Staff</label>
                <select name="staff" id="staff">>
                <option value="">--Non Staff--</option>
                <?php

                foreach($staffs as $staff)
                {
                echo '<option value="">'.$staff['firstname'].' '.$staff['lastname'].'</option>';
                }
                ?>  
                </select> <br/>

                <input type="submit" name="submit" id="submit" value="Save Details" class="btn">
                <?php
                echo form_close();
                ?>
                </form>
                </body>
                </html>

以下是在网络浏览器中的样子：

这就是我想要的html表单的样子：

我不知道如何实现这一目标，除了使用文本对齐中心，到目前为止还没有给我的html表单带来任何接近我想要的内容。

Answer 1

在你的问题中没有解决任何其他问题，这是一个简单的例子，只有你的一小部分表格：

＆＃13;

label {
  display: inline-block;
  width: 25%;
}

＆＃13;

<label>Supplier</label>
<input type="text" name="supplier" id="supplier">
<br/>

<label>PIN</label>
<input type="text" name="taxpin" id="taxpin">
<br/>

<label>Contact</label>
<input type="text" name="contact" id="contact">
<br/>

＆＃13;

在输入下方排列一个按钮：

＆＃13;

label {
  display: inline-block;
  width: 25%;
}

button{
    margin-left: 25%;
}

＆＃13;

<label>Supplier</label>
<input type="text" name="supplier" id="supplier">
<br/>

<label>PIN</label>
<input type="text" name="taxpin" id="taxpin">
<br/>

<label>Contact</label>
<input type="text" name="contact" id="contact">
<br/>
<br />
<button type="submit">Submit</button>

＆＃13;

Answer 2

从200px开始，然后增加它，直到它的中心足以满足您的需求。

label { width:200px; display: inline-block;}

Answer 3

代码中的style标记也未关闭，可能会产生一些问题

CSS中心对齐文本输入，文本区域和选择选项

3 个答案: