Question

下午好！伙计们！我一直试图让我的 Div像按钮一样运作 并压低，而我几乎就在那里。我一直在遇到一些小问题。好的，为了描述，我的网络应用程序的结构基于CSS网格技术，并且每个div都巧妙地适合它在网格上的自己的空间。 在第2行，第2列我试图将该div作为按钮执行并通过点击按下。我得到的代码完美地排列了该按钮，但现在我需要让它在同一区域内压低。我怎么做？我在此链接http://jsfiddle.net/alvaromenendez/r39vae5b/找到了一个示例，并尝试以前使用（根据他们的示例）先前对按钮的div容器的绝对和相对定位，但随后它抛出一切都没有了。我的目标有可能实现吗？或者它必须以不同的方式编码以实现该结果？在此先感谢您的帮助！

这是我的HTML代码：

    <!DOCTYPE html>
<html>
<head>
  <title> </title>
  <link rel="stylesheet" type="text/css" href="Wikipedia Viewer 2.css"  />
</head>
<body>

<div class="Main">
<h1>Wikepedia Viewer App</h1>
    <div class= grid-container>
        <div class="hold-everything">   

            <div class="button-1"><a href="#">Get Random Article</a>
            </div>

            <div class="input" id="searchTerm">
            <input type= "text" id="enter" placeholder="Enter text....">
            <!-- 
            <input class="form-control" id="searchTerm"
            <button id ="search" type="button" class="btn btn-primary">Submit</button>
            -->

            </div>

            <div class="button">
                Search
                <!--<button id ="search" type="button" class="btn btn-primary"></button>-->
            </div>

            <!-- 

            -->

            <div class="social-media">
                <!--
                <div>Facebook</div>
                <div>Twitter</div>
                <div>LinkedIn</div>
                <div>Email</div>
                -->
                social-media
            </div>  
        </div>
    </div>  
</div>
<script src="Wikipedia Viewer.js"></script>
</body>
</html>

这是我的CSS代码：

.Main{
  display: grid;
  border: 1px solid green;
  margin: 5px 10px 0 10px;
}

h1{
    text-align: center;
}




.grid-container{
    background-image: url("https://s13.postimg.org/xxhvs5yw7/Explore.jpg");
    background-size: cover;   
    background-position: center;
    width:650px;
    height:488px;
    margin: auto;
    border-radius: 25px;
    align-content: center;
    border: 1px solid green;
    font-size: large;
    line-height: 3.5em;
}

.hold-everything{
    margin-top: 160px;
    margin-left: 20px;
    width: 460px;
    height: 300px;
    border-radius: 25px;
    align-content: center;
    /*border: 1px solid green;*/

    display: grid;

    grid-template-columns: 1fr 1fr 1fr 1fr ;
    grid-template-rows: 85px 85px 85px ;

    grid-template-areas: 
        "button-1 button-1 button-1 button-1"
        "enter  enter  enter  button"
        "social-media social-media social-media social-media";
}

    a{
        text-decoration: none;
    }

    .button-1{
        grid-area: button-1;
        text-align: center;
    }

    #enter {
        grid-area: enter;
        width: 350px;
        height: 63px;
        border-radius: 5px;
        /* used individual styling outside of grid-template styling to achieve same effect */
    }

    .button{
        grid-area: button;
    }

    .social-media {
        grid-area: social-media;
    }





.button-1,
.social-media,
#enter

{
  background-color: #999;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%;
  border: 1px solid black;
}

.button{
  background-color: #999;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%;
  border: 1px solid black;  
}

/*
.btn.btn-primary{
    width: 110px;
    height: 63px;
    border-radius: 5px;
}
*/


.button {

    background: #eee;
    color: #000;

}

.button:hover {
    cursor: hand;
    cursor: pointer;

}

a.divLink {
    position: absolute;
    top: 0;
    left: 0;
    text-decoration: none;
}


//Below is some code I found at .....I want to (and is trying to) integrate/manipulate this into my code, and have my button perform like that

/* 
div {position:absolute; height:63px;}
*/
.button {
  font-family: OpenSans;
  color: #FFFFFF;
  background-color: #00FF7C;
  border: 1px solid #00FF7C;
  border-radius: 5px;
  box-shadow: 0px 5px 0px #00823F;
  bottom:0;
  left:0;
}
.button:active {
  box-shadow: 0 1px 0 #00823F;
  bottom:-4px;
}

/*

div {position:relative; height:20px;}
#startBtn {
  font-family: OpenSans;
  color: #FFFFFF;
  background-color: #00FF7C;
  border: 1px solid #00FF7C;
  border-radius: 5px;
  box-shadow: 0px 5px 0px #00823F;
  position:absolute;
  bottom:0;
  left:0;
}

#startBtn:active {
  box-shadow: 0 1px 0 #00823F;
  bottom:-4px;
}

*/

Answer 1

无需使用div并使其行为像按钮一样。只需使用按钮即可。

对于评论https://codepen.io/IDCoder/pen/rpdBQJ中的笔，这不起作用，因为在grid-template-areas中你有

grid-template-areas: 
    "button-1 button-1 button-1 button-1"
    "enter  enter  enter  btn.btn-primary"
    "social-media social-media social-media social-media";

此规则的点代表一个空列，并且您将其用于无效，这使得它根本不起作用。如果你更改grid-area没有点的其他东西，它将正常工作

我怎样才能让一个Div功能就像一个具有抑郁动作的按钮

1 个答案: