选中复选框，选择并输入内联字段-Makecheckbox,selectandinputfieldsinline

3  

Horizontal centering:

For horizontal centering, we want the left and right margin to be equal. The way to do that is to set the margins to 'auto'. This is normally used with a block of fixed width, because if the block itself is flexible, it will simply take up all the available width.

对于水平居中,我们希望左右边距相等。这样做的方法是将边距设置为“自动”。这通常与固定宽度的块一起使用,因为如果块本身是灵活的,它将占用所有可用宽度。

Vertical centering:

The essential rules are:

基本规则是:

1. Make the container relatively positioned, which declares it to be a container for absolutely positioned elements.

   使容器相对定位,声明它是绝对定位元素的容器。

2. Make the element itself absolutely positioned.

   使元素本身绝对定位。

3. Place it halfway down the container with 'top: 50%'. (Note that 50%' here means 50% of the height of the container.)

   将容器放在容器中间,“顶部:50%”。 (注意,50%'在这里意味着容器高度的50%。)

4. Use a translation to move the element up by half its own height. (The '50%' in 'translate(0, -50%)' refers to the height of the element itself.)

   使用平移将元素向上移动自身高度的一半。 ('translate(0,-50%)'中的'50%'指的是元素本身的高度。)

So your code may seem like this

所以你的代码可能看起来像这样

.main {
  background-color: grey;
  width: 1202px;
  height: 156px;
  position: relative;
}

.formContainer {
  width: 1140px;
  height: 85px;
  background-color: green;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

I hope you solved all the other problems.

我希望你解决了所有其他问题。

1  

Try modifying these rules:

尝试修改这些规则:

.checkbox, .radio {
    position: relative;
    display: inline-block; // changed from block to inline-block. Block will take 100% width. To keep elements inline you must use inline-block
    margin-top: 10px;
    margin-bottom: 10px;
}

.choice-select {
    width: 173px;
    display: inline-block; // added inline-block
}

.choice-input {
    width: 176px; // reduced width.
    display: inline-block; // added inline-block
}

1  

Check the code below, i have put the html controls in separate divs with bootstrap grid classes to make them inline and added margin: 0 auto in .formContainer class

检查下面的代码,我已将html控件放在带有引导网格类的单独div中,以使它们内联并添加边距:0。auto in .formContainer class

    


  

    

      

        
Lorem lorem lorem
          
Ipsum lorem ipsum
        
        

          
          

            
            

            

              
                
                  Lorem
                
                
                  Ipsum
                
              
            
             

            

            

              
                One
                Two
                Three
                Four
                Five
              
            
            

            

            

              
            
            

          
          

            Lorem ipsum lorem
            Lorem lorem lorem
          
          
        
        
      
    
  




.main {
    background-color: grey;
    width: 1202px;
    height: 156px;
    margin: 0 auto;
}

.formContainer {
    width: 1140px;
    height: 85px;
    background-color: green;
  margin: 0 auto;

}

button {
    height: 37px;
    width: 160px;
}

.choice {
    background-color: lightgrey;
    height: 37px;
}

.checkbox {
    width: 207px;
    border: 1px solid white;
}

.choice-select {
    width: 173px;
}

.choice-input {
    width: 390px;
}

1  

You should be able to do what you want with only bootstrap markup. I've forked your pen and modified it a little:

只应使用bootstrap标记,您应该能够执行所需的操作。我把你的笔分叉并稍微修改了一下:

http://codepen.io/ugreen/pen/XjBpqX

    


            

                Lorem lorem lorem
                
Ipsum lorem ipsum
            

            

                

                    

                        
                        Lorem
                        
                        Ipsum
                    
                    

                        
                            One
                            Two
                            Three
                            Four
                            Five
                        
                    
                    

                        
                    
                
            
            

                

                    Lorem ipsum lorem
                    Lorem lorem lorem