我创建了这个注册表单但是我似乎无法将两个div标签放在一行中,只有在我最小化窗口时它才会发生。有什么建议?我喜欢将注册表与facebook和g +放在文本的左右两边以及两个文本字段中。
<div class="col-md-offset-2 col-md-8 text-center">
<div class="container-fluid">
<div id="logo-signup">
<img class="img-responsive" src="uv.png">
</div> <!-- logo -->
<div class="signup-header">
<label class="uv-header">United Volunteers</label>
<label class="sm-title">Register Using Your Social Media Account</label>
<button type="submit" class="btn-facebook-signup">Register With Facebook</button>
<button type="submit" class="btn-gmail-signup">Register With Google+</button>
</div> <!-- login-form -->
</div> <!-- container-fluid -->
</div> <!-- col -->
<div class="col-md-offset-2 col-md-8 ">
<div class="container-fluid">
<div class="signup-form2">
<label class="signup-title"><span>Personal Information</span></label>
<div class="signup-labels">
<input type="text" class="form-input" placeholder="First Name" style="margin-right:10px">
<input type="text" class="form-input" placeholder="Last Name">
</div>
<label class="signup-title"><span>Address Information</span></label>
<label class="signup-title"><span>Skills</span></label>
<label class="signup-title"><span>Volunteering Area</span></label>
<label class="signup-title"><span>Account Information</span></label>
</div>
</div>
</div>
.signup-header {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:1000px;
overflow: hidden;
background-color: white;
padding: 25px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
}
.signup-form2 {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:1000px;
background-color: white;
padding: 10px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
z-index: 1;
}
.uv-header{
font-weight:bold;
font-size:35px;
font-family:Candara;
float:left;
padding-left:225px;
}
.sm-title {
float:left;
padding-left:225px;
margin-bottom: 5px;
font-weight: bold;
font-family:Candara;
font-size: 20px;
}
.sm-signup{
font-size:35px;
font-family:Candara;
float:left;
padding-left:225px;
}
#logo-signup {
top:70px;
left: 17%;
transform: translateX(-50%);
position:absolute;
background-color: white;
background-size: 170px auto;
background-repeat: no-repeat;
height: 170px;
width: 170px;
padding: 0px;
border: 5px solid white;
box-shadow: 1px 3px 2px grey;
z-index: 1;
}
h1 {
font-weight:bold;
font-size:35px;
font-family:Candara;
text-align: center;
margin: 100px auto 50px auto;
}
a {
text-decoration: none;
}
span{
background:#fff;
padding:0 10px;
}
.signup-title{
text-align:center;
margin-top:20px;
margin-bottom:20px;
width:100%;
border-bottom:1px solid #000;
line-height:0.1em;
}
.social_media {
text-align:center;
position:relative;
top:-75px;
}
.label {
display: block;
margin-bottom: 5px;
font-weight: bold;
font-family:Candara;
font-size: 20px;
}
.signup-labels{
float:left;
}
.btn-signup {
background-color: firebrick;
font-family:Candara;
font-size: 20px;
color: white;
padding: 10px;
border: 1px solid firebrick;
border-radius: 5px;
box-shadow: 2px 4px 4px #330000;
width: 200px;
margin:auto;
margin-top:200px;
display:block;
}
.btn-facebook-signup {
background-image: url(fb.gif);
background-color: #3b5998;
padding: 0px;
border: 3px solid white;
border-radius: 5px;
box-shadow: 1px 2px 2px grey;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
height: 50px;
width: 250px;
padding-left:40px;
font-family: sans-serif;
font-size: 16px;
color: white;
}
.btn-gmail-signup {
background-image: url(g+.gif);
background-color: #dc4a38;
padding: 0px;
border: 3px solid white;
border-radius: 5px;
box-shadow: 1px 2px 2px grey;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
height: 50px;
width: 250px;
padding-left:40px;
font-family: sans-serif;
font-size: 16px;
color: white;
}
.form-input {
width:80%;
height: 35px;
padding: 6px 12px;
font-size: 12px;
font-family: sans-serif;
vertical-align: middle;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f2f2f2;
line-height: 1.5;
}
.social_media-signup {
display:inline-block;
}
答案 0 :(得分:1)
我建议你忘记浮动:离开。这是一个老技巧,尝试使用flex进行新的技巧。
第一。使用它们包裹并在包裹中添加display flex
2nd.然后使用flex-direction:row。
你可以在about flex
找到关于flex的信息希望它能帮助你找到线索,这是我的小提琴
.parent{
position:relative;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:center;
justify-content:center;
width:200px;
height:200px;
background:#ccc;}
.child{
width:50px;
height:50px;
background:#000;
margin:1px;
}
&#13;
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
&#13;
答案 1 :(得分:0)
id喜欢将注册表与facebook和g +放在文本
下
您的代码中有一项小修改,只需在“联合志愿者”标签,“使用您的社交媒体帐户注册”标签和社交媒体按钮中添加两个单独的div。
facebook和g +在文本旁边以及两个文本 字段。
它会自动调整。我对你的表单和CSS做了很少的修改。查看整页,以获得完整的演示。
.signup-header {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:1000px;
overflow: hidden;
background-color: white;
padding: 25px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
}
.signup-form2 {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:1000px;
background-color: white;
padding: 10px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
z-index: 1;
}
.uv-header{
font-weight:bold;
font-size:35px;
font-family:Candara;
float:left;
padding-left:225px;
}
.sm-title {
float:left;
padding-left:225px;
margin-bottom: 5px;
font-weight: bold;
font-family:Candara;
font-size: 20px;
}
.sm-signup{
font-size:35px;
font-family:Candara;
float:left;
padding-left:225px;
}
#logo-signup {
top:70px;
left: 17%;
transform: translateX(-50%);
position:absolute;
background-color: white;
background-size: 170px auto;
background-repeat: no-repeat;
height: 170px;
width: 170px;
padding: 0px;
border: 5px solid white;
box-shadow: 1px 3px 2px grey;
z-index: 1;
}
h1 {
font-weight:bold;
font-size:35px;
font-family:Candara;
text-align: center;
margin: 100px auto 50px auto;
}
a {
text-decoration: none;
}
span{
background:#fff;
padding:0 10px;
}
.signup-title{
text-align:center;
margin-top:20px;
margin-bottom:20px;
width:100%;
border-bottom:1px solid #000;
line-height:0.1em;
}
.social_media {
text-align:center;
position:relative;
top:-75px;
}
.label {
display: block;
margin-bottom: 5px;
font-weight: bold;
font-family:Candara;
font-size: 20px;
}
.signup-labels{
float:left;
}
.btn-signup {
background-color: firebrick;
font-family:Candara;
font-size: 20px;
color: white;
padding: 10px;
border: 1px solid firebrick;
border-radius: 5px;
box-shadow: 2px 4px 4px #330000;
width: 200px;
margin:auto;
margin-top:200px;
display:block;
}
.btn-facebook-signup {
background-image: url(fb.gif);
background-color: #3b5998;
padding: 0px;
border: 3px solid white;
border-radius: 5px;
box-shadow: 1px 2px 2px grey;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
height: 50px;
width: 250px;
padding-left:40px;
font-family: sans-serif;
font-size: 16px;
color: white;
}
.btn-gmail-signup {
background-image: url(g+.gif);
background-color: #dc4a38;
padding: 0px;
border: 3px solid white;
border-radius: 5px;
box-shadow: 1px 2px 2px grey;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
height: 50px;
width: 250px;
padding-left:40px;
font-family: sans-serif;
font-size: 16px;
color: white;
}
.social_media-signup {
display:inline-block;
}
<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>
<div class="col-md-offset-2 col-md-8 text-center">
<div class="container-fluid">
<div id="logo-signup">
<img class="img-responsive" src="uv.png">
</div> <!-- logo -->
<div class="signup-header">
<div class="row"> <!--MODIFICATION-->
<label class="uv-header">United Volunteers</label>
<label class="sm-title">Register Using Your Social Media Account</label>
</div> <!--MODIFICATION-->
<br> <!--MODIFICATION-->
<div class="row"> <!--MODIFICATION-->
<button type="submit" class="btn-facebook-signup">Register With Facebook</button>
<button type="submit" class="btn-gmail-signup">Register With Google+</button>
</div> <!--MODIFICATION-->
</div> <!-- login-form -->
</div> <!-- container-fluid -->
</div> <!-- col -->
<div class="col-md-offset-2 col-md-8 ">
<div class="container-fluid">
<div class="signup-form2">
<label class="signup-title"><span>Personal Information</span></label>
<div class="signup-labels">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First Name" style="margin-right:10px">
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Last Name">
</div>
</div>
<label class="signup-title"><span>Address Information</span></label>
<label class="signup-title"><span>Skills</span></label>
<label class="signup-title"><span>Volunteering Area</span></label>
<label class="signup-title"><span>Account Information</span></label>
</div>
</div>
</div>
答案 2 :(得分:0)
在AngularJS中,可以使用layout =“row”来实现: -
<div style="cursor:pointer;" layout="row">
<div><i class="material-icons ">call</i></div>
<div style="padding-top:4px">Personal Information</div>
</div>
PS:仅供参考,<i>
标签用于在此示例中包含图标,因此呼叫将显示呼叫图标。它来自棱角分明的材料 - 图标包。您也可以使用任何其他标签替换它。