【发布时间】：2017-03-21 11:48:34
【问题描述】：
按钮仍然是页面的长度，为什么不会减少到50x50px？我希望代码是内联的，因为我有按钮。 但正如您在图像中看到的那样，按钮不会调整大小。我只想要一个不跨越整个页面且居中的较小按钮。
<!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>
【问题讨论】：
-
这不是一个最小的例子。如果您做了一点测试，您会发现示例中的样式和链接不是按钮的默认外观，这是因为您在文件中包含了 jquery-CSS。这会覆盖内联样式（这意味着有问题的 CSS 可能会在规则上使用
!important设置按钮的样式。无论如何 - 不要使用您无法控制的 CSS 文件，删除样式表和width和height工作。