gpt4 book ai didi

html - 填充按钮表格单元格

转载 作者:太空宇宙 更新时间:2023-11-04 13:04:04 25 4
gpt4 key购买 nike

我正在尝试使用 phone gap 为我的网络应用制作一个 html 页面,我需要表格占据整个页面,所以我使用 width: 100% 和 height: 100% 让表格占据整个页面;但是,当我使用 width: 100% 时,我希望我的按钮填充整个表格单元格,它占据了整个宽度,并且当您使用页面大小时它也会响应,但是当我使用 height: 100% 时,它什么都不做.另一方面,当我操纵按钮字体时,按钮的高度会发生变化。如何根据窗口和表格大小调整按钮和字体大小。这是我的 HTML 和 CSS 代码,我也在使用 twitter-bootstrap。提前致谢!

    <!DOCTYPE html>

<html>
<head>
<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<manifest>
<uses-permission android:name="android.permission.INTERNET" />
</manifest>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Description" />
<link rel="stylesheet" href="Stylesheet Location" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Settings</title>


</head>
<body>


<table class="table table-borderless">
<tr>
<td><button class="btn btn-default btn-lg" type="button"><span class="glyphicon glyphicon-film" id="glyph1" style="vertical-align: middle"></span><br>Broadcast</button></td>
<td><button class="btn btn-default btn-lg" type="button"><span class="glyphicon glyphicon-facetime-video" id="glyph1" style="vertical-align: middle"></span><br>Video</button></td>
</tr>
<tr>
<td><button class="btn btn-default btn-lg" type="button"><span class="glyphicon glyphicon-music" id="glyph1" style="vertical-align: middle"></span><br>Audio</button></td>
<td><button class="btn btn-default btn-lg" type="button"><span class="glyphicon glyphicon-wrench" id="glyph1" style="vertical-align: middle"></span><br>Network</button></td>
</tr>
<tr>
<td><button class="btn btn-default btn-lg" type="button"><span class="glyphicon glyphicon-cog" id="glyph1" style="vertical-align: middle"></span><br>System</button></td>
<td><button class="btn btn-default btn-lg" type="button"><span class="glyphicon glyphicon-question-sign" id="glyph1" style="vertical-align: middle"></span><br>Help</button></td>
</tr>
</table>


<script type="text/javascript">
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("file:///C:/Android/Apps/workshop/www/98001~ue.html");
</script>

</body>

table, td {
background: #181812;
border: 2px solid #333100;
}
body{
background: #181812;
}
.btn-default {
background: #FC0;
border: 2px solid red;
width: 100%;
padding-left: auto;
padding-right: auto;
}
tr {
padding-top: auto;
padding-bottom: auto;
padding-right: auto;
padding-left: auto;
}
body, html {
height: 100%;
padding:0;
margin:0;
}
table {
width: 100%;
height: 100%;
}

最佳答案

在你的 CSS 上试试这个:

body,html{height:100%;width:100%;padding:0;margin:0;}

关于html - 填充按钮表格单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25260266/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com