个人中心
gpt4 book ai didi

html - 我无法让我的按钮以正常大小显示

转载 作者：太空宇宙 更新时间：2023-11-04 06:42:35 24 4
gpt4 key购买 nike

这可能有些愚蠢，但我找不到发生这种情况的原因。在我的页面底部，我有一个按钮可以触发另一个页面。它看起来非常大，我不明白为什么。我尝试将它移到内容和容器 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>

最佳答案

你的战斗按钮有很大的宽度和最小高度。 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;
}

如果您将宽度更改为 400 像素，并将最小高度更改为 150 像素，它会缩小很多。

关于html - 我无法让我的按钮以正常大小显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53575948/

24 4 0
文章推荐： html - 如何使这个简单的 css-grid 布局在 IE11 中工作
文章推荐： python - 没有名为 _backend_gdk 的模块
文章推荐： python - request.json 未检索到 Flask POST
文章推荐： css - 在纯 CSS 中折叠表格行的高度(不影响表格宽度)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com