Question

I have a problem in inline-block, i cannot make block over my hyperlink and block are going some other position. Here the code of Html and CSS.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
 }


html{
    background-color: #fff; 
    color: #555;
    font-family: 'Lato','Arial', sans-serif;
    font-weight: 400;
    font-size: 20px;
    text-rendering: optimizeLegibility;
    
    }


.row{
    
    max-width: 1140px;
    margin: 0 auto;
}


Header{
    
    background-image:linear-gradient(rgba(0, 0, 0, 0.7) , rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
    background-size: cover;
    background-position: center;
    height: 100vh;    
}

.hero-text-box{
    position: absolute;
    width: 1140px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

h1{
    
    margin: 0;
    color: #fff;
    font-size: 240%;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 4px;
}

.btn{
    display: inline-block;
    padding: 10px 30px;
    font-weight: 300 ;   
}

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
        <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
        <link rel="stylesheet" type="text/css" href="resources/css/style1.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700" rel="stylesheet" type="text/css">
        <title>Thefoodieefreak</title> 
    </head>
    
    <body>
    <header>
        <div class="hero-text-box">
             <h1>GoodBye junk food.<br> Hello super healthy meals</h1>
             <a class="btn btn-full" href="#">I'm hungry</a>
             <a class="btn btn-ghost" href="#">Show me more</a>
         </div>   
               
    </header>
       
    </body>

</html

In the code of Html, i have added a class of btn inside <a> tag and after that in CSS code, i put display:inline-block, but its goes some other position.

This is the website image where block goes some other position:

带有控制台的网站的另一张图片

web image with console

Answer 1

在div元素中插入两个锚标记，然后添加css .btn_row {text-align：center;}

<header>
    <div class="hero-text-box">
         <h1>GoodBye junk food.<br> Hello super healthy meals</h1>
        <div class="btn_row"> 
         <a class="btn btn-full" href="#">I'm hungry</a>
         <a class="btn btn-ghost" href="#">Show me more</a>
        </div> 
     </div>   

</header>

Answer 2

<!DOCTYPE html>
<html lang="en">

    <head>
        <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
        <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
        <link rel="stylesheet" type="text/css" href="resources/css/style1.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700" rel="stylesheet" type="text/css">
        <title>Thefoodieefreak</title> 
    </head>

    <body>
    <header>
        <div class="container">
        <div class="hero-text-box">
        <h1>GoodBye junk food.<br> Hello super healthy meals</h1>
             <a class="btn btn-full" href="#">I'm hungry</a>
             <a class="btn btn-ghost" href="#">Show me more</a>
        </div>

         </div>   

    </header>

    </body>

</html>

和CSS在这里：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

 }


html{
    background-color: #fff; 
    color: #555;
    font-family: 'Lato','Arial', sans-serif;
    font-weight: 400;
    font-size: 20px;
    text-rendering: optimizeLegibility;

    }


.row{

    max-width: 1140px;
    margin: 0 auto;
}


Header{

    background-image:linear-gradient(rgba(0, 0, 0, 0.7) , rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
    background-size: cover;
    background-position: center;
    height: 100vh;    
}
.container{
      width: 1140px;
}
.hero-text-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

h1{

    margin: 0;
    color: #fff;
    font-size: 240%;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 4px;
}

.btn{
    display: inline-block;
    padding: 10px 30px;
    font-weight: 300 ;   
}

内联阻止功能不适用于<a>

2 个答案: