1

我正在为高尔夫计算器创建一个 webApp，在我的 iPod 上进行测试时，似乎文本和 div 标签不像在 Chrome 上那样居中。然后是 Inputs 和 Select 标签。这是我的 html/css

<header>
    <h1>Simple Handicap Calculator</h1>
</header>

<section>
    <input id="score1" class="score" type="tel" value="Score" onfocus="this.value = '';">
    <input id="score2" class="score" type="tel" value="Score" onfocus="this.value = '';">
    <input id="score3" class="score" type="tel" value="Score" onfocus="this.value = '';">
    <div class="rating">Course</div>
    <select id="courseRating" class="select"></select>
    <div class="rating">Slope</div>
    <select id="slopeRating" class="select"></select>
    <div class="calculateButton" onclick="HandicapCalculator.CalculateHandicap();">Tap</div>
    <div id="handicap">Handicap</div>
    <div id="curtain"></div>
</section>

然后我的CSS：

html {
font-size: 1em;
background: #825534;
color: #E6D4A7;
font-family: JosefinSlab;
}
header {
float: left;
width: 100%;
font-size: 32px;
text-align: center;

font-weight: bold;

text-shadow: 1px 1px 1px #36362C;
}
section {
float: left;
width: 100%;
}
section .score {
height: 38px;
width: 50%;
margin: 8px 25% 0 25%;
padding: none;

text-align: center;
font-size: 1.5em;
background: #5D917D;

box-shadow: 1px 1px 1px #36362C;
border: none;
-webkit-appearance: none;
-webkit-box-sizing: content-box;

}

section .rating {
float: left;
width: 50%;
margin: 8px 25% 0 25%;
font-size: 1.5em;
text-shadow: 1px 1px 1px #36362C;
text-align: center;
-webkit-appearance: none;
}
section .select {
float: left;
width: 50%;
margin: 8px 25% 0 25%;
padding: none;

background: #5D917D;
box-shadow: 1px 1px 1px #36362C;

font-size: 1.5em;
text-indent: 40%;
border: none; 
-webkit-box-sizing: content-box;
}

section .calculateButton {
float: left;
height: 50px;
width: 50%;

margin: 8px 25% 0 25%;

background: #A8AD80;
box-shadow: 1px 1px 1px #36362C;

color: #36362C;
font-size: 2em;
line-height: 50px;
text-align: center;
-webkit-box-sizing: content-box;


}
section #curtain {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;

background: #000;
opacity: .6;
}
section #handicap {
float: left;
height: 50px;
width: 70%;

margin: 8px 15% 0 15%;
background: #E6D4A7;
box-shadow: 1px 1px 1px #36362C;

color: #36362C;
font-size: 2em;
line-height: 50px;
text-align: center;
-webkit-box-sizing: content-box;
}

如果还有什么我可以提供的，请告诉我。如需实时测试版本，请访问 ragstudio.com/handicapCalculator

4

0 回答 0