标签: width

有一种方法可以在Firefox和Opera中设置PRE标签宽度,但是在IE或Chrome中没有一种众所周知的方法可以做到这一点,因此PRE标签中的硬标签代码会受到影响.

pre {
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
    -moz-tab-size: 1.5em;
    -o-tab-size: 1.5em;

    margin: 1em 0 0 0;
    padding: 1em 1em 1em 1em;
    width: 65%;
}

显然是一个经典问题,但我发现的"解决方案"没有奏效,包括其他各种关于SO的问题.

如果我的表比它的容器宽,我希望我的表格单元格宽度保持固定,不要调整大小以适应容器.

可重现的HTML(<td>用PHP生成):

<html>
  <head></head>

  <body>
    <table>
      <tr>
        <?php for($i=0;$i<15;$i++) { 
           echo "<td style='width:150px;border-right:1px solid black;'>".($i+1)."</td>"; 
        } ?>
      </tr>
    </table>
    <div style='background:chartreuse;width:150px'>This is 150px wide.</div>
  </body>
</html>

我尝试过的:

• table-layout:fixed
• span容器与display:inline-block集
• div 带内联块的容器

似乎应该有一种简单的方法可以使前面的代码生成一个溢出正文的表.

有人可以帮忙吗？

编辑

我之前的措辞可能不太清楚,但我想自己指定列宽.

我试图这样做而不指定表的显式宽度.只有TD会强制桌子更宽,这应该(应该？)迫使容器变宽.

此外,内联CSS仅用于示例目的.

我有一个流畅的布局,但如果浏览器窗口拉得太大,文本会变得如此宽,以至于在1行读取这么长的句子很奇怪.文本的最大宽度是多少？我想这取决于字体大小.有某种公式或启发式吗？

目前我特定情况下的字体是serif 16px,但我很想知道不同字体和大小的最佳实践.

我正在为http://digitaleditor.com/做一些工作,我遇到了一些令人困惑的事情.

网页底部有一个水平滚动条,但我一直无法弄清楚原因.使用谷歌Chrome的开发人员工具,我发现整个页面上只有3个项目超过960像素宽.前两个是html和body,第二个是#hpages,然而第二个只有970像素宽(html并且body每个宽1263像素).此外,有一个非常明显的CSS规则扩展#hpages到970像素:

#hpages ul {   width:970px; float:right; }

我找不到拉伸这些html或body元素的规则.我尝试运行以下脚本来查看是否有任何我只是忽略的元素可能会拉伸页面:

javascript:widest=null;$("body *").each(function(){if(widest==null)widest=this;else if($(this).width()>$(widest).width())widest=this;});alert(widest.id);

这返回#hpages,意味着身体中没有超过970像素宽的项目(即使身体被拉伸到1263像素).

没有影响body元素宽度或元素宽度的CSS规则html.

老实说,对于拉伸页面的内容感到遗憾,我不知道如何弄明白.在这一点上,我最后的办法是系统地从页面中删除项目,直到它被解决.我想知道是否有人知道更好的选择.

一个直截了当的问题..是否可以在CSS中设置span标签的宽度百分比？例如:

<span style="width: 50%">...</span> 

等等..

在我的项目中,我目前正在使用div但是在每个div标签之后插入一个换行符(我不想要).因此,最明显的解决方案是使用span标签而不是div.但是后来我无法定义span标签的宽度.Atleast不是百分比的方式.

在此先感谢您的帮助!

我设定了一种风格<html>:

html {
    background: #ECECEC;
    border: 1px solid #FFFFFF;
}

如果页面内容比页面宽,为什么边框会停止,但背景会继续？

这是一个显示问题的小提琴:http://jsfiddle.net/rPGyc/3

从这样开始,我喜欢:

但后来我添加了一个段,这发生了:
宽度在IB中设置,而不是在代码中.

我只需要一种动态计算宽度的方法.最后,它会做这样的事情:

control.width = (labelWidths + marginWidths);
// where marginWidths = (marginWidth * control.numberOfSegments)

我想做的事情,我认为非常简单.我正在构建的网站的标题是一种纯色,需要跨越屏幕的整个宽度,无论它被浏览的是哪个浏览器.到目前为止,我创建的内容在台式机和笔记本电脑上都很棒,但是当我测试它时平板电脑或手机,标题不会一直向右.标题内的内容确实跨越了一切,这对我来说真的很困惑.我可以让标题栏跨越整个宽度的唯一方法是将position属性设置为static,这不是我对此站点所需要的,所以这对我没有任何帮助.下面是我正在使用的CSS和HTML.有人可以看看它,让我知道我错过了什么.

HTML:

<div class="header">
<div class="container">
<div class="header-content">
....Some Content goes in here....
</div> <!-- /.header-container -->
</div> <!-- /.container -->
</div> <!-- /.header -->

CSS:

html, body {
background-color: #949494;
width: 100%;
margin: 0px;
padding: 0px;
}

.header {
width: 100%;
min-width: 100%;
height: 200px;
background-color: #ffffff;
padding-top: 8px;
}

.container {
width: 1200px;
margin: 0 auto;
text-align: center;
}

我准备了一个JSFiddle来解释/告诉你我的问题:http://jsfiddle.net/nz96C/

它起初看起来还不错,但是当我#firsttd在整个表中添加一些文本时,一旦使用tds整个宽度,就会溢出父div.我知道如何用CSS(#firstdiv {width:90px;overflow:hidden;})解决这个问题,但我不知道确切的像素数(百分比不起作用).另外我不希望第一个td中的文本换行.

我希望你能解决我的问题,我甚至无法用我的第一语言解释它.

编辑:我的目标是有一个表,其中第一个td中的文本有多长并不重要,表永远不会溢出父div - 没有文本被包装.我希望第一个td溢出的文本不显示.

对不起,如果这是一个愚蠢的问题,但事实是我对此一无所知.

我正在寻找找到一些方法来定位img的元素HTML,她注意到来自w3schools.com这句话(据讲的设置页面width中的img元素):

在HTML 4.01中,宽度可以以像素或包含元素的%来定义.在HTML5中,值必须以像素为单位.

它表示width属性必须设置为像素而不是百分比.但使用百分比时,解决我的问题要容易得多.我用百分比和最新版本的检查结果FireFox,Chrome以及IE.一切都很好.

现在,我的问题是,使用百分比(尽管HTML5指令)虽然它实际上工作正常,但是什么是不良后果？我们应该关心什么,不应该关注什么？

非常感谢您阅读并澄清情况.