Question

这可能是愚蠢的，但是我找不到发生这种情况的原因。在页面底部，我有一个按钮触发另一个页面。它出现的非常大，我不知道为什么。我尝试将其移至内容和容器div之外，并且没有任何更改，因此不能成为CSS。

/* responsive css */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
img {
    max-width: 100%;
}
/* regular css */
body {
    background-color: #cc33ff;
    color: #99ffcc;
    font-family: Verdana, Arial, sans-serif;
}
a:link{
    color: #990000;
    font-size: 14px;
}
#container { 
    margin-left: auto;    
    margin-right: auto;
    width:80%;
   }

#content {
    margin-left: auto;
    margin-right: auto;
	width: 78%;
	background-color: #ecbef8;
	color: #000040;
	padding: 10px;
}


#logo {
 text-align:center;
 margin: 0;
 font-family: Geneva, Arial, Helvetica, sans-serif;
 padding-top: 30px;
 padding-bottom: 20px;

}
.center{
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 50%;
}
.centerText{
    text-align: center;
}
.nav{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    color: #88FFFF;
    font-size: 12px;
    border: 2px sienna solid;
}
.games{
    width:100%;
    min-height: 50vh;
    margin-left: 40px;
    display:grid;
    grid-template-columns: repeat(auto-fill, 150px);
    grid-template-rows: repeat(auto-fill, 3fr);
    grid-gap: 10px;
    justify-content: center;
}
.games a:link{
    color: #490707;
}
#footer {
    width:100%;
    font-size: .60em;
    font-style: italic;
    text-align: center;
    border-top: 2px double #000040;
    padding-top: 20px;
    padding-bottom: 20px;
}
.style1 {font-size: 18px}

/* game specific css */
#battle {
    width: 78%;
    border: 0;
    min-height: 60vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 50px repeat(2, 150px) 150px repeat(2, 50px) 75px 150px repeat(2, 30px);
    grid-gap: 5px;
}
#item1 {
    grid-column: 1 / span 2;
    border-bottom: 2px solid purple;

}

#item5, #item4 {
    border-bottom: 2px solid purple;
}
#item12{
    grid-column: 1 / span 2;
    grid-row: 7;
}
#item13 {
    grid-column: 1 / span 2;
    grid-row: 8;
}

#battleInstructions {
    width: 85%;
    border: 0;
    min-height: 40vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 300px);
    grid-gap: 5px;
}
#BIitem1 {
    grid-column: 1 / span 3;
}
#BIitem5 {
    grid-column: 1 /span 3;
}

!DOCTYPE html>
<html lang="en">
<head>
	<title>Michelle's Arcade | Battle Instructions</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="../css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="container">
    <img src="../images/funny-dragon.jpg" class="center" />
    <h1 class = "centerText">Michelle's Arcade </h1>
    <h2 class ="centerText"><em> Play a Game!</em></h2>
  <div class="nav">
    <div class="flex flex1"><a href="../index.html">Home</a></div>
    <div class="flex flex2"><a href="../assets/about.html">About Michelle</a></div>
    <div class="flex flex3"><a href="../assets/play_games.html">Play a Game</a></div>
  </div> <!-- end nav -->
  </div> <!-- end container -->
    
  <div id="content">
      <div id="battleInstructions">
        <div id="BIitem1"><p><span class="style1">In this game you will battle the evil troll.
            You can choose your weapon from the three shown -- a set of magic rocks that are a lot stronger and
            heavier than they look, an extremely sharp sword, or a crossbow and arrow. Unfortunately, you do not 
            know ahead of time what weapon the troll will use. You each begin with 100 points. For each round of 
            the battle, the winner takes 10 points from the loser. When either of you reaches 200 points, the
            battle is over and one of you will lie dead. The winner is determined by the list shown below. Push 
            the button when you are ready to begin the battle and ... Good luck!</span></p></div>
        <div id="BIitem2"><p><span class="style1">Wizard</span></p>
            <p><img src="../images/wizard.jpg" width="120" height="168"></p>
        </div>
        <div id="BIitem3"><p><span class="style1">Troll</span></p>
            <p><img src="../images/troll.jpg" width="120" height="168"></p>
            </div>
        <div id="BIitem4"><span class="style1"><p>Weapons</p>
            <p><img src = "../images/rock.jpg" width="100" height="70" />&nbsp;Magic Rocks</p>
            <p><img src = "../images/sword.jpg" width="100" height="70" />&nbsp;Sword</p>
            <p><img src = "../images/arrow.jpg" width="100" height="70" />&nbsp;Bow & Arrow</p></div>
        <div id="BIitem5"><span class="style1">Note: <br />
              The rocks can deflect the arrow. <br />
              The sword beats the rocks. <br />
              The arrow beats the sword.</span></div>
      </div><!-- end battle instructions -->
      <input type="button" id="battle" value="Begin the battle!" onclick="location.href = 'battleground.html'";>
    </div> <!-- end content -->
    
    <div id="footer">Copyright &copy; 2018 Michelle's Arcade<br />
        <a href="mailto:dementeddwarf@gmail.com">dementeddwarf@gmail.com</a></div>
    </div> <!-- end footer -->
  </div> <!-- end container -->
</body>
</html>

Answer 1

您的战斗按钮的宽度和最小高度都很大。 60vh表示它将使用整个屏幕垂直空间的60％。

#battle {
    width: 78%;
    border: 0;
    min-height: 60vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 50px repeat(2, 150px) 150px repeat(2, 50px) 75px 150px repeat(2, 30px);
    grid-gap: 5px;
}

如果将宽度更改为例如400px，将最小高度更改为150px，则会缩小很多。

我的按钮无法正常显示

1 个答案: