Question

我正在尝试使用display：block和display：inline在文本中插入复选框。当我使用此复选框时，该复选框会消失，并且不会显示完整尺寸。

我试图阅读并找到其他方法来解决此问题，但我被困住了。

还有其他方法可以使复选框与文本位于同一行吗？

请帮助学生:)

grid_newsletter  {
	background: #ffeb3a;
		
}

.grid_newsletter .text {
	text-align: center;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 41px;		
}

.grid_newsletter input {
    width: 380px;
    border-top: transparent;
    border-left: transparent;
    border-right: transparent;
    margin-left: 20px;
    border-bottom: 2px solid black;
    padding-left: 0px;
}

.grid_newsletter input[type="checkbox"] {
	width: 22px;
	height: 22px;
	border: 2px solid black;
	text-align: center;
	display: inline;
		
}

.grid_newsletter .checkbox_terms {
	margin-top: 23px;
	display: block;
	
}

.grid_newsletter .content {
    text-align: center;
    padding:  70px 55px 30px 60px;
    display: inline;
}


.grid_newsletter .text_box_newsletter {
	background: white;
    width: 495px;
    height: 90px;
    text-align: center;
    margin-top: 27px;
    margin-left: auto;
    margin-right: auto;
}

.grid_newsletter .text_box_newsletter p {
	padding-top: 39px;
    padding-bottom: 35px;
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.100em;
    
}

<div class="grid_newsletter">

    <div class="content">

        <div class="text">Newsletter!</div>

        <form>
            <input type="text" name="firstname" placeholder="förnamn">
            <input type="email" name="email" placeholder="e-post">
        </form>
        
        
      
        <div class="checkbox_terms">
           
	             <input type="checkbox" name="confirm">
	             
		             <span class="save">Jag godkänner att mina uppgifter lagras.</span>
		             <span class="terms"><a href="#">Läs mer om vår hantering av data och vår integritetspolicy här.</a></span>     
				
			</div> <!-- checkbox_terms --> 

        <div class="text_box_newsletter">
            <p>skicka</p>
        </div>
        

</div> <!-- content -->
</div> <!-- grid_newsletter -->

`

Answer 1

使用显示块时，必须为其指定宽度和高度，并向左浮动，以便其在该部分中行内联。

您也可以根据需要使用高度。希望这就是您想要的。

grid_newsletter  {
	background: #ffeb3a;
		
}

.grid_newsletter .text {
	text-align: center;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 41px;		
}

.grid_newsletter input {
    width: 380px;
    border-top: transparent;
    border-left: transparent;
    border-right: transparent;
    margin-left: 20px;
    border-bottom: 2px solid black;
    padding-left: 0px;
}

.grid_newsletter input[type="checkbox"] {
 
	border: 2px solid black;
	text-align: center;
	display: block;
	width: 20px;
	height:15px;
	float: left;
}

.grid_newsletter .checkbox_terms {
	margin-top: 23px;
	display: block;
	
}

.grid_newsletter .content {
    text-align: center;
    padding:  70px 55px 30px 60px;
    display: inline;
}


.grid_newsletter .text_box_newsletter {
	background: white;
    width: 495px;
    height: 90px;
    text-align: center;
    margin-top: 27px;
    margin-left: auto;
    margin-right: auto;
}

.grid_newsletter .text_box_newsletter p {
	padding-top: 39px;
    padding-bottom: 35px;
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.100em;
    
}

<div class="grid_newsletter">

    <div class="content">

        <div class="text">Newsletter!</div>

        <form>
            <input type="text" name="firstname" placeholder="förnamn">
            <input type="email" name="email" placeholder="e-post">
        </form>
        
        
      
        <div class="checkbox_terms">
           
	             <input type="checkbox" name="confirm">
	             
		             <span class="save">Jag godkänner att mina uppgifter lagras.</span>
		             <span class="terms"><a href="#">Läs mer om vår hantering av data och vår integritetspolicy här.</a></span>     
				
			</div> <!-- checkbox_terms --> 

        <div class="text_box_newsletter">
            <p>skicka</p>
        </div>
        

</div> <!-- content -->
</div> <!-- grid_newsletter -->

Answer 2

使用vertical-align:middle，如下所示用于文本框：

.grid_newsletter input[type="checkbox"] {
    width: 22px;
    height: 22px;
    border: 2px solid black;
    text-align: center;
    display: inline;
    vertical-align: middle;/*Newly added*/
}

Answer 3

您可以在相关元素上将display: inline-block或display: inline与vertical-align: middle一起使用。

grid_newsletter  {
	background: #ffeb3a;
}

.grid_newsletter .text {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 41px;		
}

.grid_newsletter input {
  width: 380px;
  border-top: transparent;
  border-left: transparent;
  border-right: transparent;
  margin-left: 20px;
  border-bottom: 2px solid black;
  padding-left: 0px;
}

.grid_newsletter input[type="checkbox"] {
	width: 22px;
	height: 22px;
	border: 2px solid black;
	text-align: center;
	display: inline;
}

.grid_newsletter .checkbox_terms {
	margin-top: 23px;
	display: block;
}

.grid_newsletter .content {
  text-align: center;
  padding:  70px 55px 30px 60px;
  display: inline;
}


.grid_newsletter .text_box_newsletter {
	background: white;
  width: 495px;
  height: 90px;
  text-align: center;
  margin-top: 27px;
  margin-left: auto;
  margin-right: auto;
}

.grid_newsletter .text_box_newsletter p {
	padding-top: 39px;
  padding-bottom: 35px;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.100em;
}

.vAlign {
  display: inline-block;
  vertical-align: middle;
}

<div class="grid_newsletter">

    <div class="content">

        <div class="text">Newsletter!</div>

        <form>
            <input type="text" name="firstname" placeholder="förnamn">
            <input type="email" name="email" placeholder="e-post">
        </form>

        <div class="checkbox_terms">

            <input type="checkbox" name="confirm" class="vAlign">
	             
            <span class="save vAlign">Jag godkänner att mina uppgifter lagras.</span>
            <span class="terms vAlign"><a href="#">Läs mer om vår hantering av data och vår integritetspolicy här.</a></span>     
				
		</div> <!-- checkbox_terms --> 

        <div class="text_box_newsletter">
            <p>skicka</p>
        </div>

    </div> <!-- content -->
</div> <!-- grid_newsletter -->

复选框消失

3 个答案: