Question

我创建了这个注册表单但是我似乎无法将两个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;
}

Answer 1

我建议你忘记浮动：离开。这是一个老技巧，尝试使用flex进行新的技巧。

第一。使用它们包裹并在包裹中添加display flex

2nd.然后使用flex-direction：row。

你可以在about flex

找到关于flex的信息

希望它能帮助你找到线索，这是我的小提琴

＆＃13;

.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;

Answer 2

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>

Answer 3

在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>标签用于在此示例中包含图标，因此呼叫将显示呼叫图标。它来自棱角分明的材料 - 图标包。您也可以使用任何其他标签替换它。

将两个标签左右放置

3 个答案: