Question

您好我必须在两个相等的列中安排表单，并且我编写了以下html和css3。但似乎有些事情正在将第二个标签置于“右上角”。附截图。请帮助解决问题。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="./css/jquery.mobile-1.4.0.css">
        <script src="./script/jquery-1.10.2.js"></script>
        <script src="./script/jquery.mobile-1.4.0.js"></script>

        <link rel="stylesheet" href="./css/riders.css">
        <link rel="stylesheet" href="./css/jquery.mobile-1.4.0.css">
        <div class="details-fst">
    </head>
    <body>
<div id ="prd_content" data-role="content">
    <div class="details-fst">
        <div>
            <div  class="pre">
                <label class="myRiderlabel riderfonts" id="riderlabel1" data-role="none" for="amt">my Value</label>
                <input class="myRiderbox riderfonts" data-role="none" id="amt" name="amt" type="text" value="" required>
            </div>
            <div class="pre">
                <label class="myRiderlabel riderfonts" id="riderlabel2" data-role="none" for="pre">Amount</label>
                <input class="myRiderbox riderfonts" data-role="none" id="pre" name="pre" type="text" value="" required>
            </div>
        </div>
        <div>
            <div  class="pre">
                <label class="myRiderlabel riderfonts" id="riderlabel1" data-role="none" for="amt">upto</label>
                <input class="myRiderbox riderfonts" data-role="none" id="amt" name="amt" type="text" value="" required>
            </div>
            <div class="pre">
                <label class="myRiderlabel riderfonts" id="riderlabel2" data-role="none" for="pre">Payment Duration</label>
                <input class="myRiderbox riderfonts" data-role="none" id="pre" type="number" name="quantity" min="1" max="5" value="" required>
            </div>
        </div>
        <div>
            <div  class="pre">
                <label class="myRiderlabel2 riderfonts" id="riderlabel1" data-role="none" for="amt">frequency</label>
                <input class="myRiderbox riderfonts" data-role="none" id="amt" name="amt" type="text" value="" required>
            </div>
            <div class="pre">
                <label class="myRiderlabel2 riderfonts" id="riderlabel2" data-role="none" for="pre">Duration</label>
                <button class="submitbtn" id="submit" data-role="none" type="submit" onclick="chooseLan()">Submit</button>
            </div>
        </div>
    </div>  
</div>

CSS：

.myRiderbox {
    min-height: 0.5% !important;
    padding: 1% !important;
    width: 20% !important;
    margin: 1%;
    text-align: left;
    background: none repeat scroll 0% 0% white;
    border: 1px solid rgb(221, 235, 244);
    border-radius: 5px;
    color: rgb(102, 102, 102);
    outline: medium none;
    height: 22px;
}

.myRiderbox2{
    min-height: 0.5% !important;
    padding: 1% !important;
    width: 20% !important;
    margin: 8% 1%;
    text-align: left;
    background: none repeat scroll 0% 0% white;
    border: 1px solid rgb(221, 235, 244);
    border-radius: 5px;
    color: rgb(102, 102, 102);
    outline: medium none;
    height: 22px;
}

.myRiderlabel {
    min-height: 0.5% !important;
    padding: 2% 0% !important;
    margin: 1% 1% !important;
    text-align: left;
    color: rgb(102, 102, 102);
    outline: medium none;
    height: 22px;
}

.myRiderlabel2 {
    min-height: 0.5% !important;
    padding: 4% 0% !important;
    margin: 2% 1% !important;
    text-align: left;
    color: rgb(102, 102, 102);
    outline: medium none;
    height: 22px;
    float: left;
}

#riderlabel1{width: 22% !important;}
#riderlabel2{width: 12% !important;}

.riderfonts {
    color: rgb(0,106,182);
    font-size: 1em !important;
    font-family: "Times New Roman", Times,serif;
    font-style:normal
}

.submitbtn {
  background: #9ACD32;
  background-image: -webkit-linear-gradient(top, #9ACD32, #9AC9922);
  background-image: -moz-linear-gradient(top, #9ACD32, #9AC9922);
  background-image: -ms-linear-gradient(top, #9ACD32, #9AC9922);
  background-image: -o-linear-gradient(top, #9ACD32, #9AC9922);
  background-image: linear-gradient(to bottom, #9ACD32, #9AC9922);
  -webkit-border-radius: 6;
  -moz-border-radius: 6;
  border-radius: 6px;
  font-family: Arial;
  color: #ffffff;
  font-size: 16px;
  padding: 8px 17px 8px 16px;
  text-decoration: none;
}

.submitbtn:hover {
  background: #9ACD32;
  background-image: -webkit-linear-gradient(top, #9ACD32, #9AC9922);
  background-image: -moz-linear-gradient(top, #9ACD32, #9AC9922);
  background-image: -ms-linear-gradient(top, #9ACD32, #9AC9922);
  background-image: -o-linear-gradient(top, #9ACD32, #9AC9922);
  background-image: linear-gradient(to bottom, #9ACD32, #9AC9922);
  text-decoration: none;
}

感谢 enter image description here

Answer 1

我使用HTML div标签放置为您创建了一个新的CSS文件。如果我的回答对您有用，请单击“右检查标记”接受我的回答。

// CSS

.Container {
width:600px;
height:220px;
padding:5px;
border:dotted #808080 1px;
}

.LeftColumn {
width:285px;
height:200px;
margin-left:5px;
margin-top:10px;
border:dotted #808080 1px;

}

.RightColumn {
width:285px;
height:200px;
margin-top:-200px;
margin-left:300px;
border:dotted #808080 1px;
}



// HTML Coding
<body>
<div class="Container">
    <div class="LeftColumn">Container for column 1</div>
    <div class="RightColumn">Container for column 2.</div>
</div>
</body>

enter image description here

如何安排50％宽度和50％高度容器的div？

1 个答案: