HTML按钮没有调整大小
问题描述：
该按钮仍然是页面的长度，为什么它不会缩小到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>
答
试试这个
<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>
</head>
<body>
<br />
\t
\t <style>
\t .container {
display: flex;
}
\t </style>
\t <div class="container">
<div>
\t <input type="seach" id="mySearch" placeholder="quick search" align="center">
</div>
<div>
\t \t <button onClick="searchFunction()" style="height:50px; width:50px;">Search</button>
</div>
</div>
\t
\t
\t
\t
\t
\t
\t
\t
<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>
请发表[MCVE] –
这不是一个小例子。如果您只做了一点测试，您会发现示例中的样式和链接不是按钮的默认外观，这是因为您将jquery-CSS包含在文件中。这覆盖了内联样式（这意味着所讨论的CSS可能在规则上使用'！important'设置按钮样式。无论如何 - 不要使用不受控制的CSS文件，删除样式表和宽度'和'高度'工作。 – junkfoodjunkie