Question

我无法正确对齐输入字段。我希望Enter标题详细信息和状态字段正确对齐。我尝试了一些东西，但没用。

label {
    display: inline-block;
    width:100px;
    text-align: right;
}
input {
  display: inline-block;
  width:100px;
  float: left;
}

add
{
    font-size: 150%;
}

heading
{
    font-size: 180%;
    text-align: center;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: cornflowerblue;
    clear: left;
    text-align: center;
}

/*div.container {
    width: 100%;
    border: 1px solid gray;
}*/
h2{
    text-align: center; 
    color:black;
    font-size: 270%;
    font-family:'Segoe UI';
        

}

body{
    position: relative;
    background: url(images/gradient.png);
    background-repeat:no-repeat;
    background-size:150% 150vh;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #286090;;
    color: white;
}

.temp123
{
margin: 0 auto;
margin-left: auto;
margin-right: auto;
text-align:center;
}

.ui-datepicker-calendar {
    display: none;
    }
body1{


    position: relative;
    background: url(images/gradient2.jpeg);
    background-repeat:no-repeat;
    background-size:100% 100vh;
    }

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <link href="font.css" rel="stylesheet" />    
    <script src="header.js"></script>
</head>

<body ng-app="myApp" ng-controller="headerCtrl">

    
    <div class="container" style="background-color:silver;">
        
            <h2><b>Header Details</b></h2>
        

        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <!--<div class="panel-heading">
                    <h4 class="panel-title" style="text-align: center">


                        <a>Add the Headers </a>
                    </h4>
                </div>-->

                <div class="panel-body">

                    <div>

                                <label>Enter the Header:</label>
                                <input type="text" name="Header" ng-model="header"><br>
                            

                    </div>
                    <p>

                    </p>

                    <div>
 
                                <label>Status:</label>
                                <select name="status" id="status" ng-model="status">
                                    <option value="" selected="selected">(Select the status)</option>
                                    <option value="Active">Active</option>
                                    <option value="Inactive">Inactive</option>

                                </select>
  
                    </div>

                    <div class="pull-right">

                        <button type="submit" class="btn btn-primary" ng-click="Save()">Save</button>

                        <button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>

                    </div>






                </div>
            </div>

        </div>
                <div>

                <table class="table table-bordered" align="left">
                    <tr>
                        <th style="text-align:center;font-size:120%">Header</th>
                        <th style="text-align:center;font-size:120%">Status</th>

                    </tr>
                    <tr ng-repeat="data in headerData.Result">
                        <td>{{data.Header}}</td>
                        <td>{{data.Status}}</td>
                        <td>
                            <!--<button class="editbtn">edit</button>-->

                            <button ng-click="editableInput = !editableInput">
                                <span ng-show="editableInput">UPDATE</span>
                                <span ng-show="!editableInput">EDIT</span>
                            </button>
                            <button class="editbtn">DELETE</button>
                        </td>
                    </tr>


                </table>

            </div>
</div>
</body>
</html>

Sample JSFiddle

我已将此添加到我的代码中：

label {
    display: inline-block;
    width:100px;
    text-align: right;
}
input {
  display: inline-block;
  width:100px;
  float: left;
}

Answer 1

＆＃13;

td {
    display: inline-block;
    width:100px;
    text-align: right;
}
input {
  display: inline-block;
  width:100px;
  float: left;
}

add
{
    font-size: 150%;
}

heading
{
    font-size: 180%;
    text-align: center;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: cornflowerblue;
    clear: left;
    text-align: center;
}

/*div.container {
    width: 100%;
    border: 1px solid gray;
}*/
h2{
    text-align: center; 
    color:black;
    font-size: 270%;
    font-family:'Segoe UI';
        

}

body{
    position: relative;
    background: url(images/gradient.png);
    background-repeat:no-repeat;
    background-size:150% 150vh;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #286090;;
    color: white;
}

.temp123
{
margin: 0 auto;
margin-left: auto;
margin-right: auto;
text-align:center;
}

.ui-datepicker-calendar {
    display: none;
    }
body1{


    position: relative;
    background: url(images/gradient2.jpeg);
    background-repeat:no-repeat;
    background-size:100% 100vh;
    }

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
    <link href="font.css" rel="stylesheet" />    
    <script src="header.js"></script>
</head>

<body ng-app="myApp" ng-controller="headerCtrl">

    
    <div class="container" style="background-color:silver;">
        
            <h2><b>Header Details</b></h2>
        

        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <!--<div class="panel-heading">
                    <h4 class="panel-title" style="text-align: center">


                        <a>Add the Headers </a>
                    </h4>
                </div>-->

                <div class="panel-body">
<table>

                    <tr>

                               <td> <label>Enter the Header:</label></td>
                               <td>  <input type="text" name="Header" ng-model="header"></td>
                            


                    </tr>
                  

                   
  <tr>

                               <td>Status:</td>
                               <td> <select name="status" id="status" ng-model="status">
                                    <option value="" selected="selected">(Select the status)</option>
                                    <option value="Active">Active</option>
                                    <option value="Inactive">Inactive</option>

</select></td>
                                </tr>
                 </table>

                    <div class="pull-right">

                        <button type="submit" class="btn btn-primary" ng-click="Save()">Save</button>

                        <button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>

                    </div>






                </div>
            </div>

        </div>
                <div>

                <table class="table table-bordered" align="left">
                    <tr>
                        <th style="text-align:center;font-size:120%">Header</th>
                        <th style="text-align:center;font-size:120%">Status</th>

                    </tr>
                    <tr ng-repeat="data in headerData.Result">
                        <td>{{data.Header}}</td>
                        <td>{{data.Status}}</td>
                        <td>
                            <!--<button class="editbtn">edit</button>-->

                            <button ng-click="editableInput = !editableInput">
                                <span ng-show="editableInput">UPDATE</span>
                                <span ng-show="!editableInput">EDIT</span>
                            </button>
                            <button class="editbtn">DELETE</button>
                        </td>
                    </tr>


                </table>

            </div>
</div>
</body>
</html>

＆＃13;

Answer 2

向左移除浮动并向右移动文本：https://jsfiddle.net/1wbkt3hx/3/

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

input {
  display: inline-block;
  width:   100px;
}

Answer 3

您可以使用表格，因为它在对齐元素方面非常有效。这是一个例子：

＆＃13;

<table>
    <tbody>
        <tr>
            <td>Enter the header:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>Status:</td>
            <td>
                <select>
                    <option value="" selected="selected">(Select the status)</option>
                    <option value="Active">Active</option>
                    <option value="Inactive">Inactive</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>

＆＃13;

Answer 4

＆＃13;

label {
    display: inline-block;
    width:100px;
}

input {
  display: inline-block;
  width:100px;
}

add
{
    font-size: 150%;
}

heading
{
    font-size: 180%;
    text-align: center;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: cornflowerblue;
    clear: left;
    text-align: center;
}

/*div.container {
    width: 100%;
    border: 1px solid gray;
}*/
h2{
    text-align: center; 
    color:black;
    font-size: 270%;
    font-family:'Segoe UI';
        

}

body{
    position: relative;
    background: url(images/gradient.png);
    background-repeat:no-repeat;
    background-size:150% 150vh;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #286090;;
    color: white;
}

.temp123
{
margin: 0 auto;
margin-left: auto;
margin-right: auto;
text-align:center;
}

.ui-datepicker-calendar {
    display: none;
    }
body1{


    position: relative;
    background: url(images/gradient2.jpeg);
    background-repeat:no-repeat;
    background-size:100% 100vh;
    }

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <link href="font.css" rel="stylesheet" />    
    <script src="header.js"></script>
</head>

<body ng-app="myApp" ng-controller="headerCtrl">

    
    <div class="container" style="background-color:silver;">
        
            <h2><b>Header Details</b></h2>
        

        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <!--<div class="panel-heading">
                    <h4 class="panel-title" style="text-align: center">


                        <a>Add the Headers </a>
                    </h4>
                </div>-->

                <div class="panel-body">

                    <div>

                                <label>Enter the Header:</label>
                                <input type="text" name="Header" ng-model="header"><br>
                            

                    </div>
                    <p>

                    </p>

                    <div>
 
                                <label>Status:</label>
                                <select name="status" id="status" ng-model="status">
                                    <option value="" selected="selected">(Select the status)</option>
                                    <option value="Active">Active</option>
                                    <option value="Inactive">Inactive</option>

                                </select>
  
                    </div>

                    <div class="pull-right">

                        <button type="submit" class="btn btn-primary" ng-click="Save()">Save</button>

                        <button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>

                    </div>






                </div>
            </div>

        </div>
                <div>

                <table class="table table-bordered" align="left">
                    <tr>
                        <th style="text-align:center;font-size:120%">Header</th>
                        <th style="text-align:center;font-size:120%">Status</th>

                    </tr>
                    <tr ng-repeat="data in headerData.Result">
                        <td>{{data.Header}}</td>
                        <td>{{data.Status}}</td>
                        <td>
                            <!--<button class="editbtn">edit</button>-->

                            <button ng-click="editableInput = !editableInput">
                                <span ng-show="editableInput">UPDATE</span>
                                <span ng-show="!editableInput">EDIT</span>
                            </button>
                            <button class="editbtn">DELETE</button>
                        </td>
                    </tr>


                </table>

            </div>
</div>
</body>
</html>

＆＃13;

Answer 5

这是解决问题的简单方法只需添加

// CSS

<?php
require_once 'dbconfig.php';
$stmt_edit = $DB_con->prepare('SELECT shomarepishfactor 
               FROM pishfactorriali ORDER BY userID DESC LIMIT 1;');
$stmt_edit->execute(array(':uid'=>$id));
$edit_row = $stmt_edit->fetch(PDO::FETCH_ASSOC);
extract($edit_row);
if(isset($_POST['btnsave']))
{
    $usercodefani = $_POST['user_codefani'];
    $usercodekala = $_POST['user_codekala'];
    $usersharhkala = $_POST['user_sharhkala'];
    $userzamantahvilkala = $_POST['user_zamantahvilkala'];
    $userkeshvar = $_POST['user_keshvar'];
    $useritemQty = $_POST['user_itemQty'];
    $usermetr = $_POST['user_metr'];
    $usergheymatround = $_POST['user_gheymatround'];
    $usermultiply = $_POST['user_multiply'];
    $userinfocode = $_POST['user_infocode'];
    if(!isset($errMSG))
    {
        $stmt = $DB_con->prepare('INSERT INTO 
                   pishfactorriali(codefani,codekala,sharhkala,
                   zamantahvilkala,keshvar,itemQty,
                   metr,gheymatround,multiply,infocode) 
                 VALUES(:ucodefani,:ucodekala,:usharhkala, 
                      :uzamantahvilkala ,:ukeshvar,:uitemQty, 
                :umetr,:ugheymatround,:umultiply, :uinfocode)');
        $stmt->bindParam(':ucodefani',$usercodefani);
        $stmt->bindParam(':ucodekala',$usercodekala);
        $stmt->bindParam(':usharhkala',$usersharhkala);
        $stmt->bindParam(':uzamantahvilkala',$userzamantahvilkala);
        $stmt->bindParam(':ukeshvar',$userkeshvar);
        $stmt->bindParam(':uitemQty',$useritemQty);
        $stmt->bindParam(':umetr',$usermetr);
        $stmt->bindParam(':ugheymatround',$usergheymatround);
        $stmt->bindParam(':umultiply',$usermultiply);
        $stmt->bindParam(':uinfocode',$userinfocode);
        if($stmt->execute())
        {
            $successMSG = "new record succesfully inserted ...";
            header("refresh:2;index.php"); 
        }
        else
        {
            $errMSG = "error while inserting....";
        }
    }
}?>

// HTML

label{
  min-width:120px
}
.input-row{
  padding-bottom:10px;
}

检查此https://jsfiddle.net/1wbkt3hx/4/

希望您的问题能有这个解决方案。

输入字段的对齐方式

5 个答案: