1
該按鈕仍然是頁面的長度，爲什麼它不會縮小到50x50px？我希望代碼與內嵌按鈕一樣。 但是，正如你在圖像中看到的那樣，按鈕不會調整大小。我只想要一個不跨越整個頁面並居中的小按鈕。HTML按鈕沒有調整大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MySite</title>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<style>
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Homepage</h1>
</div>
<br />
<br />
<input type="seach" id="mySearch" placeholder="quick search" align="center">
<button onClick="searchFunction()" align="right" style="height:50px; width:50px;">Search</button>
<br />
<br />
<a href="#signIn">Sign In</a>
<p><strong>Welcome!</strong></p>
<a href="#course" data-transition="fade">Course</a>
<br>
<a href="#videoTutorials">Video Tutorials</a>
<br>
<a href="#forumsChat" data-transition="fade">Forums/Chat</a>
<br>
<a href="#directory" data-transition="fade">Directory</a>
<br>
<a href="#additionalResources" data-transition="fade">Additional Resources</a>
</div>
<div>
<div data-role="footer">
<h1>Mobile web app for Students!</h1>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="signIn">
<div data-role="header">
<h1>Sign In</h1>
</div>
<div data-role="main" class="ui-content">
<p>In your to ensure the best experience and you recieve content specifically for you, please sign in.</p>
<br>
<form>
<div data-role="fieldcontain">
<label for="textinput">Email: </label>
<input type="text" name="textinput" id="textinput" value="" />
</div>
<div data-role="fieldcontain">
<label for="passwordinput">Password: </label>
<input type="password" name="passwordinput" id="passwordinput" value="" />
</div>
<button>Sign In</button>
</form>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="course">
<div data-role="header">
<h1>Course</h1>
</div>
<div data-role="main" class="ui-content">
<p>Welcome! Here you will find contect about your course. You will need to log in to view specific information related to your course.</p>
<br>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="videoTutorials">
<div data-role="header">
<h1>Video Tutorials</h1>
</div>
<div data-role="main" class="ui-content">
<p>Welcome! Here you will find different video tutorials that will help your knowldge of programming grow. You will find different catagories such as Web Development and Game Programming. ENJOY!</p>
<br />
<hr>
<h1>Web Development</h1>
<p align="center">HTML5</p>
<p align="center">(from thenewboston.com)</p>
<p align="center"><iframe width="560" height="315" src="https://www.youtube.com/embed/Mp0f0zTPLec" frameborder="0" allowfullscreen></iframe></p>
<br />
<p align="center">JavaScript</p>
<p align="center">(from thenewboston.com)</p>
<p align="center"><iframe width="560" height="315" src="https://www.youtube.com/embed/yQaAGmHNn9s" frameborder="0" allowfullscreen></iframe></p>
<br />
<p align="center">CSS</p>
<p align="center">(from EJ Media on YouTube)</p>
<p align="center"><iframe width="560" height="315" src="https://www.youtube.com/embed/qKoajPPWpmo?list=PLr6-GrHUlVf8JIgLcu3sHigvQjTw_aC9C" frameborder="0" allowfullscreen></iframe></p>
<br />
<hr>
<h1>Game Programming</h1>
<p align="center">C++ in Unreal Engine</p>
<p align="center">(from Unreal Engine on YouTube)</p>
<p align="center"><iframe width="560" height="315" src="https://www.youtube.com/embed/mSRov77hNR4?list=PLZlv_N0_O1gYup-gvJtMsgJqnEB_dGiM4" frameborder="0" allowfullscreen></iframe></p>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="forumsChat">
<div data-role="header">
<h1>Forums/Chat</h1>
</div>
<div data-role="main" class="ui-content">
<p>Welcome! Here you will be able to stay in touch with your fellow students. You can see who is on chatting now, or start a conversation in the forums.</p>
<br />
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="directory">
<div data-role="header">
<h1>Directory</h1>
</div>
<div data-role="main" class="ui-content">
<p>Welcome! Here you will be able to find information for your current professors and fellow students. You will need to log in first in order to see information pertaining to you. Without logging in you will see general contact information for the school and administration contact information</p>
<br />
<hr>
<h1>General</h1>
<br />
<p>Visit Rasmussen college: <a href="http://www.rasmussen.edu/" target="_blank">Rasmussen Site</a></p>
<p>Call: 888-549-6755</p>
<br />
<h2>Rasmussen Location</h2>
<p align="left"><a href="#floridaDialog">Florida</a></p>
<p align="left"><a href="#kansasDialog">Kansas</a></p>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="additionalResources">
<div data-role="header">
<h1>Additional Resources</h1>
</div>
<div data-role="main" class="ui-content">
<p>Welcome! Here you will find additional resources to help you grow. You will find links and videos to various toppics in computer science; such as programming, networking etc..</p>
<br />
</div>
</div>
<div data-role="page" data-dialog="true" data-add-back-btn="true" id="kansasDialog">
<div data-role="header">
<h1>Kansas</h1>
</div>
<h2>Topika</h2>
<p>620 SW Governor View<br>Topeka, KS 66606<br>785-228-7320</p>
<hr>
</div>
<div data-role="page" data-dialog="true" data-add-back-btn="true" id="floridaDialog">
<div data-role="header">
<h1>Florida</h1>
</div>
<h2>Fort Myers</h2>
<p>9160 Forum Corporate Parkway<br>Suite 100<br>Fort Myers, FL 33905</p>
<p>239-477-2100<br>866-344-0229</p>
<hr>
</div>
</body>
</html>
請發表[MCVE] –
這不是一個小例子。如果您只做了一點測試，您會發現示例中的樣式和鏈接不是按鈕的默認外觀，這是因爲您將jquery-CSS包含在文件中。這覆蓋了內聯樣式（這意味着所討論的CSS可能在規則上使用'！important'設置按鈕樣式。無論如何 - 不要使用不受控制的CSS文件，刪除樣式表和寬度'和'高度'工作。 – junkfoodjunkie