Question

我是一名学习如何编程的学生。我无法弄清楚为什么我的表CSS中没有任何工作。我正在尝试缩小我的单元格，使其全部适合屏幕而不必侧滚动。这是我的HTML代码。如果重要的话，我也使用Aptana Studio 3作为编辑。

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="utf-8">  
    <link rel="stylesheet" href="MainCSS.css">
    <link rel="stylesheet" href="IndexTableCSS.css">
        <title>Noah's Ark Pet Sanctuary</title>
</head>
<body>
<header id="header">
    <img src="SanctuaryHeader.jpg">
</header>
<nav>
    <ul>
        <li><a href="santuary.html">ANIMAL SANCTUARY</a>
        <ul>
            <li><a href="hospital.html">ANIMAL HOSPITAL</a></li>
        </ul>
        </li>
        <li> <a href="adoptDOG.html">ADOPTION CENTER</a>
        <ul>
            <li><a href="petHelth.html">PET HEALTH CARE</a></li>
            <li><a href="petTraining.html">TRAINING TIPS</a></li>
        </ul>
        </li>
        <li><a href="donations.html">DONATIONS</a>
        <ul>
            <li><a href="volteering.html">VOLUNTEERING</a></li>
        </ul>
        </li>
        <li><a href="store.html">OUR STORE</a></li>
        <li><a href="newsEvents.html">NEWS &amp; EVENTS</a></li>
    </ul>
</nav>
<br>
<br>
<table id="SanctuaryTable">
        <tr>
        <td><img src="mural.jpg"></td>
        <td><img src="santary.jpg"></td>
        </tr>
        <tr>
        <td>Noah's Ark Pet Sanctuary was founded and incorporated as an Illinois Non-Profit corporation in 1978
             by a small group of residents who care about animals.  One of our goals is to educate the public on 
             the proper care and population control of domestic dogs and cats<br>
            <br>
            <strong>What we do</strong>
            <br>
            Noah's Ark takes in adoptable cats and dogs from Rockford and the surrounding area.  
            Once at the sanctuary they receive proper medical care and are put up for adoption into qualified homes for a nominal fee
            <br>
            <br>
            <img src="dogSit.jpg">
        </td>
        <td>            
            Noah's Ark Animal Sanctuary 
            <br>
            111 North First Street
            <br>
            Rockford IL 61107
            <br>
            <br>
            <strong>Hours</strong>
            <br>
            Mon - Tue - Thurs - Fri  9:30 am - 5:00 pm
            <br>
            <br>
            Wed 9:30 am 3:30 pm
            <br>
            <br>
            Sat 9:30 am - 3:00 pm
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <img src="CatPlay.jpg"> 
        </td>
        </tr>
        <tr>
        <td><img src="ArkFooter.jpg"></td>
        </tr>
    </table>
</body> 
</html>

这是我的IndexTableCSS：

#SanctuaryTable
{
    border-collapse:collapse;
    word-wrap:break-word ;
    width: 500px;
}

.small
{
    width: 50%; 
}

我查看了我的MainCSS文件，并没有看到任何干扰其他CSS的内容，但这里也是代码：

body
{
font-family: Arial,  Verdana, sans-serif;
margin-left: 40px;
}

ul 
{
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li 
{
    display: block;
    position: relative;
    float: left;
}

li ul 
{
    display: none;
}

ul li a 
{
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #1e7c9a;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover 
{
background: #3b3b3b;
}

li:hover ul 
{
    display: block;
    position: absolute;
}

li:hover li 
{
    float: none;
    font-size: 11px;
}

li:hover a 
{ 
    background: #3b3b3b;
}

li:hover li a:hover
{
    background: #1e7c9a;
}

Answer 1

这句话让我感到惊恐：

我查看了我的MainCSS文件夹，但没有看到任何内容干扰其他CSS，但这里也是代码：

你还没有在你的href中为css定义一个目录？它应该是这样的：

<link rel="styleheet" type="text/css" href="directory/stylesheet-name.css />

请注意您的命名约定，并确保您与captilisation，驼峰式或全部小写一致。

Answer 2

你应该制作一个div包装器，将所有段落放入限制宽度的区域。然后将包装器的宽度写入CSS中，良好的宽度通常约为960px。

<div id="wrapper">
all of your code here
</div>

as for your CSS

#div wrapper {
width:960px;
}

Answer 3

不熟悉Aptana Studio 3，但我知道在Visual Studio中可能会出现严重错误：
默认情况下，它使用Windows-1252编码保存其文件，直到您的文件中的字符无法在Windows-1252中表示，然后它将以Unicode格式保存，这意味着UTF-16。
现在它本身不会是一场灾难，但许多浏览器希望他们的样式表和脚本文件与HTML文件具有相同的编码，因此如果您将一个文件保存为Windows-1252而另一个文件保存为UTF-16，则变得不相容了。

如果Aptana有类似的问题，我所知道的唯一解决方案是加载所有文件，然后使用相同的编码保存所有文件，最好是UTF-8，然后问题不再发生。

另一点是，您可能没有意识到表的正常行为是将其所有宽度视为最小值。以this fiddle为例，它将表格和td都设置为300px，但内容要宽得多，因此表格会扩展到内容的整个宽度。这与大多数其他HTML元素（如小提琴中的<p>）形成对比，这些元素确实尊重宽度，但让内容溢出其边界。

然后是滥用的东西。好吧，只是你不应该将HTML元素用于不适合的事物。
例如，<strong>旨在将注意力集中在一些事物或一篇散文中，作为强调（相当于提高你的声音），这些事物。不只是简单地使一段文字变粗。为此，请使用CSS。或者，如果您仔细阅读HTML5规范，甚至可以使用<b>。由于<b>没有内在含义，因此可以仅用于制作大胆的内容（我不建议这样做）。
同样我提到的其他事情。如果您原谅插件，我会在自己的网站here上放置HTML滥用指南。

为什么我桌上的CSS不起作用？

3 个答案: