gpt4 book ai didi

html - 列调整大小 CSS 或 HTML

转载 作者:行者123 更新时间:2023-11-28 08:10:31 25 4
gpt4 key购买 nike

我有一个表格,我试图删除“MENU”一词周围的间距,但没有成功。这是我正在使用的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Peer Review</title>
</head>
<style type="text/css">
#test {
transform: rotate(-90deg);
font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14pt;
color: black;
font-weight: bold;
margin: 0px 0px 0px 0px;
right: 0px;
padding: 0px 0px 0px 0px
}
table.nospacing {
border-spacing: 0;
}
table.nospacing th,
td {
padding: 0;
}
</style>

<body>
<table class="nospacing" style="border-style:none;background-color:aqua">
<tr>
<td>
<ul>
<li>&nbsp;&nbsp;&nbsp;Review</li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home</a>
</li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;About</a>
</li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contacts</a>
</li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FAQs</a>
</li>
</ul>
<hr width="200px" />
<ul style="position:relative">
<li><a href="#">&nbsp;&nbsp;&nbsp;Products</a>
</li>
<li><a href="#">&nbsp;&nbsp;&nbsp;Report</a>
</li>
<li><a href="#">&nbsp;&nbsp;&nbsp;Periodic</a>
</li>
<li><a href="#">&nbsp;&nbsp;&nbsp;Guide</a>
</li>

</ul>
<ul>
<!-- #BeginEditable "redlines" -->
<li style="display:none"><a href="#">&nbsp;&nbsp;&nbsp;Redlines</a>
</li>
<!-- #EndEditable -->
</ul>
</td>
<td style="border-left:medium;border-left-color:white;border-left-style:solid">
<p id="test">MENU</p>
</td>

</tr>
</table>


</body>

</html>

如何缩小右栏的宽度?我尝试设置填充、宽度等无济于事。

最佳答案

请检查此代码,如果您需要任何所需的宽度,您可以更改最大宽度。

 #test {
transform: rotate(-90deg);
font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14pt;
color: black;
font-weight: bold;
margin: 0px 0px 0px 0px;
right: 0px;
padding: 0px 0px 0px 0px
}
table.nospacing {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
}
table.nospacing th,
td {
padding: 0;
}
.menu-col{max-width: 30px;}
<table class="nospacing" style="border-style:none;background-color:aqua">
<tr>
<td>
<ul>
<li>&nbsp;&nbsp;&nbsp;Review</li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home</a>
</li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;About</a>
</li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contacts</a>
</li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FAQs</a>
</li>
</ul>
<hr width="200px" />
<ul style="position:relative">
<li><a href="#">&nbsp;&nbsp;&nbsp;Products</a>
</li>
<li><a href="#">&nbsp;&nbsp;&nbsp;Report</a>
</li>
<li><a href="#">&nbsp;&nbsp;&nbsp;Periodic</a>
</li>
<li><a href="#">&nbsp;&nbsp;&nbsp;Guide</a>
</li>

</ul>
<ul>
<!-- #BeginEditable "redlines" -->
<li style="display:none"><a href="#">&nbsp;&nbsp;&nbsp;Redlines</a>
</li>
<!-- #EndEditable -->
</ul>
</td>
<td class="menu-col" style="border-left:medium;border-left-color:white;border-left-style:solid">
<p id="test">MENU</p>
</td>

</tr>
</table>

关于html - 列调整大小 CSS 或 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29298686/

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