Question

.intro h1{
    font-family: 'Cambria';
        font-size: 16pt; 
        font: bold;
        text-align: left;
}

.intro p{ 
    
    font-family: 'Calibri';  
    font:italic;
    font-size: 12pt; 
    padding: 0px 690px 0px 20px;
    text-align: left;

}
.content{ 
    border: 2px solid; 
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px; 
}
#para1{
    padding: 0px 1050px 0px 20px; 
    
}
#para2{
    padding: 0px 1099px 0px 20px;
}

.username-label, .username-textbox, .password-label, .password-textbox {
   text-align:right; 
}

<html>

    <head>
        <link href="~/Styles/Home.css" rel="stylesheet" />
        <title>Final Project</title>
    </head>

    <body>
        <script src="~/Scripts/jquery-2.1.1.min.js"></script>
        <script src="~/Scripts/jquery-ui.min.js"></script>
        <script src="~/Scripts/Home.js"></script>
        
        <div class="intro">

          <h1>Welcome to Cuyahoga Community College Student Services Online</h1>
            <p>Cuyahoga Community College recognizes students' rights to access personal and academic records
              in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
        </div>
        <div class="content">
        <p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
         <div class="username-label">Username: </div>
            <div class="username-textbox">
                <input class="existing username-input-textbox" type="text" value="" />
            </div>
       
            <div class="password-label">Password:</div>
            <div class="password-textbox">
                <input class="existing password-input-textbox" type="text" value="" />
            </div>
            <button id="button1">Log in</button>
            <hr />

            <p id="para2">New Users, please create a new account by providing us with some basic information.</p>
            <div class="Username-label1">Username: </div>
            <div class="username-textbox1">
                <input class="username-new-input-textbox" type="text" value="" />
            </div>
            <div class="Password-label2">Password:</div>
            <div class="password-textbox2">
                <input class="password-new-input-textbox" type="text" value="" />
            </div>
            <div class="Email-label3">Email:</div>
            <div class="email-textbox3">
                <input class="email-new-input-textbox" type="text" value="" />
            </div>
            <div class="Repeat-Email-label4">Repeat Email Address:</div>
            <div class="repeat-email-textbox4">
                <input class="reenter-new-input-textbox" type="text" value="" />
            </div>
            <button id="button2">Create Account</button>

        </div>

        <footer>Cuyahoga Community College</footer>
        <footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
    </body>

</html>

我正在开发一个Web开发项目，该项目包含一个登录桌面屏幕，让Tri-C的学生（这只是为了练习）输入他们的用户名和密码（如果他们已经拥有现有帐户），但是对于学生谁没有帐户，他们可以创建一个帐户。此外，我还没有开始在任何按钮上创建任何功能（稍后会出现）。我一直在尝试将用户名和密码标签以及用户名和密码文本框放在右侧时遇到问题。我知道我可以使用text-align属性让它们在右边，但是它没有做我想在图片中做的事情。到目前为止，这是我的代码，以及我想要实现的目标。

Here is my desired outcome

Answer 1

在内容div中创建新的div元素，一个用于左侧，另一个用于右侧。然后设置display: table-cell;和width: 50%。那应该照顾它。

查看小提琴here

编辑：摆脱那个疯狂的填充！

如何让中间内容在border-radius内左右定位？

1 个答案: