diff --git a/index.html b/index.html
index 41013c9..534e6b6 100644
--- a/index.html
+++ b/index.html
@@ -23,25 +23,48 @@
 							<p>逢年过节遇到三姑六婆，拒绝叫不出口的尴尬！轻松搞定亲戚关系～</p>
 						</div>
 						<div class="bd">
-							<p>计算类型：
-								<label for="default"><input id="default" type="radio" name="type" value="default" checked>找称呼</label>
-								<label for="chain"><input id="chain" type="radio" name="type" value="chain">找关系</label>
+							<div class="group">
+								<div class="field">
+									计算类型：
+									<label for="default">
+										<input id="default" type="radio" name="type" value="default" checked>
+										<span>找称呼</span>
+									</label>
+									<label for="chain">
+										<input id="chain" type="radio" name="type" value="chain">
+										<span>找关系</span>
+									</label>
+								</div>
 							</p>
 							<div class="group">
-								<p>我的性别：
-									<label for="male"><input id="male" type="radio" name="sex" value="1" checked>男</label>
-									<label for="female"><input id="female" type="radio" name="sex" value="0">女</label>
-								</p>
-								<p>称呼方式：
-									<label for="call"><input id="call" type="radio" name="reverse" value="0" checked>我称呼对方</label>
-									<label for="called"><input id="called" type="radio" name="reverse" value="1">对方称呼我</label>
-								</p>
+								<div class="field">
+									我的性别：
+									<label for="male">
+										<input id="male" type="radio" name="sex" value="1" checked>
+										<span>男</span>
+									</label>
+									<label for="female">
+										<input id="female" type="radio" name="sex" value="0">
+										<span>女</span>
+									</label>
+								</div>
+								<div class="field">
+									称呼方式：
+									<label for="call">
+										<input id="call" type="radio" name="reverse" value="0" checked>
+										<span>我称呼对方</span>
+									</label>
+									<label for="called">
+										<input id="called" type="radio" name="reverse" value="1">
+										<span>对方称呼我</span>
+									</label>
+								</div>
 							</div>
 							<p>
 								<textarea id="input" placeholder="称谓间用'的'字分开…"></textarea>
 							</p>
 							<p>
-								<span>快速选择：</span><br/>
+								<label>快速选择：</label><br/>
 								<span>
 									<button class="btn" data-value="爸爸">父</button>
 									<button class="btn" data-value="妈妈">母</button>
diff --git a/style/index.css b/style/index.css
index 326ea7a..f78df2e 100644
--- a/style/index.css
+++ b/style/index.css
@@ -34,6 +34,7 @@ a:hover{
 }
 
 .mod-head{
+    padding: 0 20px;
     line-height: 36px;
     text-align: right;
 }
@@ -55,7 +56,13 @@ a:hover{
 	margin:0 auto 20px;
 }
 .mod-panel .bd p{
-	line-height: 30px;
+    overflow: hidden;
+}
+.mod-panel .field{
+    line-height: 28px;
+}
+.mod-panel .field span,.mod-panel .field input{
+    vertical-align: middle;
 }
 .mod-panel .input-text{
     width: 60px;
@@ -69,7 +76,7 @@ a:hover{
 .mod-panel .input-button {
     height: 30px;
     width: 80px;
-    margin: 15px  10px 0 0;
+    margin: 10px 10px 10px 0;
     background: #4bae4f;
     border: medium none;
     line-height: 30px;
@@ -79,7 +86,9 @@ a:hover{
     cursor: pointer;
     outline: none;
 }
-.mod-panel label,.mod-panel p span{
+.mod-panel label{
+    display: inline-block;
+    min-width: 90px;
     margin-right:10px;
 }
 .mod-panel .btn{
@@ -146,13 +155,32 @@ a:hover{
 }
 
 @media screen and (max-width: 800px)  {
+    .mod-panel .hd{
+        padding-top: 10px;
+        margin-bottom: 10px;
+    }
+    .mod-panel .hd h1{
+        font-size: 20px;
+    }
+    .mod-panel .hd p{
+        line-height: 24px;
+        overflow: hidden;
+    }
+    .mod-panel textarea{
+        width: 100%;
+        height: 80px;
+        box-sizing: border-box;
+    }
     .mod-panel p span{
+        float: left;
+        width: 50%;
+        text-align: center;
         margin-right: 0;
     }
     .mod-panel .btn{
-        width: 80px;
-        margin-bottom: 7px;
-        line-height: 28px;
+        width: 48%;
+        margin-bottom: 5px;
+        line-height: 24px;
     }
 
     .mod-qrcode,.mod-my{