使用CSS跨屏幕的宽度

的style.css使用CSS跨屏幕的宽度

.headerBar table,tr,td{ 
    background-color: #f1f1f1; 
    width: 100%; 
    height: 44px; 
    border: 0px; 
    padding:0px; 
    margin:0px; 
}

video.html

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
     <div class="headerBar"> 
       <table> 
       <tr> 
        <td> 
        FILL 
        </td> 
       </tr> 
      </table> 
     </div> 
    </body> 
</html>

问题1： ~~我想表跨越宽度的页面，它不会~~ 。解决

问题2： ~~我想的桌子坐下在页面的最顶端，所以有没有边界或空格以上，向左，或表中的权。~~ 解决

问题3： 是否有这样做的更好的办法？可能使用新的HTML5的东西？

谢谢！

来源

2013-08-01 Kryptos

更改宽度：100％px;到宽度：100％; – sparkalow

@sparkalow是的，我意识到我发布的权利。不过谢谢。 – Kryptos

避免使用表格进行定位/造型，您可以使用div或列表创建各种布局 –

为了让坐在顶部没有边框，填充或宽度做这样的事情：

FIDDLE

<div class="headerBar"> 
    <table> 
     <tr> 
      <td>FILL</td> 
     </tr> 
    </table> 
</div> 

.headerBar table, tr, td { 
    background-color: #f1f1f1; 
    width: 100%; 
    height: 44px; 
    border: 0px; 
    padding:0px; 
    margin:0px; 
    position:fixed; /** or absolute, depending on what you are trying to accomplish **/ 
    top:0; 
    left:0; 
}

是的，你不应该使用表的样式或布局。你可以完成相同的只有divs

<div class="headerBar"> 
    FILL 
</div>

/**编辑**/

要回答你的第三个问题，是有更好的方法来做到这一点...它不必然涉及HTML5，但只是良好的HTML实践。如果项目足够大（有时即使不是这样），您可以也可能应该使用类似Twitter Bootstrap这样的前端框架，这可能会对您有很大的好处，其中包括设计概念和示例以帮助您开始。

来源

2013-08-01 18:13:02 feitla

这样做！非常感谢你！ – Kryptos

我使用了一张桌子，因为酒吧里会有更多的东西。从本质上讲，我克隆了每个YouTube页面上的顶部栏。我不需要一张桌子来放置物品吗？或者也可以用div来完成？ – Kryptos

不，你不需要一个“表”来定位这被认为是不好的做法。你可以用'div'很容易地用css定位。 – feitla

你有width: 100%px;应该是width: 100%;

来源

2013-08-01 18:10:19

你说你还是need2和3回答说，试试这个：

body { 
    margin: 0; 
    padding: 0; 
}

应该没有国界现在

来源

2013-08-01 18:12:46 samrap

第三个问题：它取决于你想要对表做什么......如果你只是用它来给你的元素正确的位置，你应该使用div-elements和css代替。 ;）

来源

2013-08-01 18:15:54 Fabi

你只需要这对于第一个问题：

.headerBar table{ 
    background-color: red; 
    width: 100%; 
    height: 44px; 
    border: 0; 
    padding:0; 
    margin:0; 
}

不会有围着桌子anyspace如果不前添加任何元素。

关于第三个问题。如果它变得更复杂一点，我建议你做两件事情。

按照有关html和css的屏幕录像或阅读一本好书，有很多只是谷歌它......并且当你对这两种语言更熟悉一点时，就开始使用类似Bootstrap的框架或来自Zurb的基金会，不要忘记查看他们的源代码。

来源

2013-08-01 18:18:17

首先，我会建议使用div而不是table由于许多原因，但这只是我。

A div允许您做的不仅仅是一个table的意义，而且当您不得不在几个月后编辑它时，它就会变得更加困惑。

HTML页面

<header> 
    <p> My text here </p> 
</header> 
<div class="widthS"> 
    <p> Whatever you are trying to put here </p> 
</div> 
<footer> 
    <p> Copyright </p> 
</footer>

CSS页面

.widthS { 
background: #f1f1f1; 
width: 100%; 
height: 44px; 
border: 0px; 
padding:0px; 
margin:0px; 
}

现在你可以添加这样的一些很有趣的CSS功能为box-shadow: 0px 1px 2px #2b2b2b;或border-radius: 7px 7px 0 0;或opacity: 0.5;。第一个增加了一个几乎 90度角投影到一个元素，在顶角增加了弯曲的边缘，这使得一个元素是透明的。

来源

2013-08-01 18:35:05

使用CSS跨屏幕的宽度

回答

相关问题