为什么我的表格在尝试调整大小时会截断文本？另外，为什么桌子的顶部甚至没有我的名字？

为什么我的表格在尝试调整大小时会截断文本？另外，为什么桌子的顶部甚至没有我的名字？

------HTML代码------

<!DOCTYPE html>

<html>

<head>

<title>********* ******** | Jr Developer</title>

<link rel="stylesheet" type="text/css" href="css/portfolioStyle.css">

</head>

<body >

<header id="nameAndContact">

<div class="container">

<h1>********* ********</h1>

<table>

<tr>

<th></th>

<td>Contact Information</td>

</tr>

<tr>

<th>Email:</th>

<td>mac************@*****.com</td>

</tr>

<tr>

<th>Phone:</th>

<td>***-***-****</td>

</tr>

</table>

</div>

</header>

<section id="selfTitleAndDesc">

<div class="container">

<h1>Full Stack Developer and Designer</h1>

<h2>I write functional and simple to understand code with a strong working knowledge of front and back-end services</h2>

</div>

</section>

</body>

</html>

--------结束 HTML 代码--------

--------CSS代码-------------

.container{

width:80%;

margin:auto;

overflow:hidden;

}

#nameAndContact h1{

float:auto;

width:70%;

padding:0;

text-align:center;

font-family:"Arial Black", Gadget, sans-serif;

font-size:40px;

box-sizing: border-box;

}

#nameAndContact table{

table-layout:fixed;

display:inline;

float:right;

width:30%;

padding:0 30px;

text-align:center;

font-family:"Arial Black", Gadget, sans-serif;

font-size:14px;

}

@media(max-width:700px){

#nameAndContact h1{

width:100%;

float:none;

}

#nameAndContact table{

width:100%;

float:none;

}

}

--------CSS 代码结束---------

我遇到的问题是，当我调整浏览器中的窗口大小时，电子邮件和“联系信息”一词开始在屏幕右侧被切断。我需要以某种方式将文本包裹在表格中吗？我在 h1 和表格中使用的百分比是否存在问题？也不确定我的表格没有与我的 h1 显示一致的原因。非常感谢任何帮助，我对网络编码相当陌生，谢谢大家:)。

www说

浏览 82回答 2

2回答

慕姐4208626

删除我注释掉的内容：内联不适用于浮动宽度 30% 不稳定，我建议使用像素并更改它们@media填充只是占用了不必要的空间#nameAndContact table { table-layout: fixed; /*display: inline;*/ float: right; /*width: 30%;*/ /*padding: 0 30px;*/ text-align: center; font-family: "Arial Black", Gadget, sans-serif; font-size: 14px;}然后将其添加到您的CSS中：缩短第一列，因为它不需要那么大，所以我给它一个固定的大小#nameAndContact table th:first-of-type { width: 90px;}我还建议检查表结构（哪里是 td 哪里 th 等）

0

0

神不在的星期二

为了使媒体查询正常工作，您需要在<head>页面部分中使用以下内容：<meta name="viewport" content="width=device-width, initial-scale=1.0">或者它的某种变体。

0

0

随时随地看视频慕课网APP

相关分类

Html5