标签: width
如何将HTML表格宽度限制为屏幕宽度的95%？
如何将HTML表格宽度限制为屏幕宽度的95%？
我正在使用
<style type="text/css">
table {
max-width:95%;
border-collapse:collapse;
...
}
...
但生成的HTML页面的表格宽度大于屏幕宽度(1440x900屏幕),页面底部会显示滚动条.
推荐指数
解决办法
查看次数
使用内边距而不是宽度（或高度）来构建 div 是一个好习惯吗？
我有下一个CSS
.button {
width:0;
height:18px;
padding: 8px 0px 2px 30px;
overflow:hidden;
transition: padding .5s ease;
}
.button:hover {
padding: 8px 170px 2px 35px
}
我有这个简单的 html
<div class="button"> A text </div>
我正在寻找仅在一个 div 中创建的内容，这是一个白色的框，如果您将鼠标悬停在该白色框上，它将扩展到右侧以平滑地显示文本。
这就是问题所在：
在这些情况下，用宽度/高度替换填充是一个好的做法吗？或者将文本放在不同的 div 中并使用相应的宽度和高度而不是填充更好？
我不知道我是否解释得好
推荐指数
解决办法
查看次数
在android中改变imageview的高度和宽度
在我的应用程序按钮单击我想改变imageview的大小.当我点击一个按钮我想增加5的视图尺寸(每个宽度和高度).点击其他按钮我想减小尺寸.i试过这个.我怎么能这样做？下面是code.its无法正常工作
public void increase(View v)
{
int height=imageView.getHeight();
int width=imageView.getWidth();
imageView.getLayoutParams().height = height+5;
int h=imageView.getHeight();
System.out.println("hhhhhhhhhh,,,,,,,,,,"+h);
System.out.println("width n hight..."+width+"and"+height);
}
推荐指数
解决办法
查看次数
阻止文本扩展收缩包装div
我有一个收缩器div,它收缩缠绕在其他几个div上,因此固定器没有固定宽度.持有者内部还有另一个包含文本的div.当文本太多时,它会扩展持有者,因此它不会再收缩.这是我的问题的演示,http://jsfiddle.net/WSbAt/.这是一个照片库页面.
我想可能没有设置支架宽度的方法,因为每行的图像数量是动态的,所以我不能这样做.我可以用jQuery来解决它,但希望有一个css解决方案.
编辑:我试图不指定任何宽度,因为每行的缩略图数量取决于您的窗口大小.
CSS:
#container
{
width:600px; /*only set for demo. will be random on live page*/
border:1px solid black;
text-align:center;
}
#holder
{
display: inline-block;
border:2px solid blue;
}
.thumbnail
{
float:left;
width:100px;
height:100px;
background-color:red;
margin-right:10px;
margin-bottom:10px;
}
.expandedHolder
{
padding:10px;
border:2px solid yellow;
margin-bottom:10px;
margin-right:10px;
}
.fullImage
{
float:left;
width:250px;/*only set for demo. will be random on live page*/
height:200px;
background-color:green;
}
.text
{
float:left;
margin-left:10px;
}
HTML:
<div id="container">
<div id="holder"> …推荐指数
解决办法
查看次数
通过更改容器的宽度来证明文本
我希望我的工具提示中的文字是合理的,但不是像在css中那样在文字之间设置大的空格,而是通过调整容器宽度.
例如,这是工具提示
如果有大量文本,我不希望我的工具提示拉伸到1000px,所以我将最大宽度设置为300px.
通过设置最大宽度,我会进入工具提示看起来很完美的情况,如果我稍微加宽容器,在这种情况下为15px.
或者可能有一种情况,我想缩小文本元素以确切适合.
最好的方法是什么？
我能想到的最好的办法是让硬道理,在跨度包装它,测量到边缘的距离,如果是低于50%,扩大或者更多收缩容器中,直到容器的高度的变化,这意味着行了添加或删除
推荐指数
解决办法
查看次数
Flexbox列表,其中包含剩余宽度,省略号和新行上的一些内容
我正在努力学习flexbox,但我很难理解这个概念.我想创建一个电子邮件列表,其中每个项目都是一个flexbox容器(见下文).
规则:
- 标签是可选的,但如果显示,则直接显示在名称旁边.
- 日期始终存在,宽度变化
- 该人的姓名填补剩余空间.如果它变大,它就会被截断.
- 名称和标签之间的空格始终为5px
- 邮件主题显示在新行上,也会被截断
到目前为止我的尝试:https://jsbin.com/sepobipiwa/edit？html,css,output
.container {
width: 350px;
background-color: #FFF;
}
html {
font-family: 'Nunito Sans', sans-serif;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: flex;
flex-direction: row;
align-items: baseline;
padding: 20px;
border-bottom: 1px solid #ccc;
}
.name {
font-size: 16px;
font-weight: bold;
text-overflow: ellipsis;
}
.tag {
margin-left: 5px;
font-size: 10px;
font-weight: bold;
background-color: #EFEFEF;
padding: 3px 5px;
border-radius: 3px;
text-transform: uppercase;
}
.subject { …推荐指数
解决办法
查看次数
SVG 中的零笔画宽度
使用 Postscript 多年后，我现在正在学习 SVG。PS 有一个功能我到目前为止还无法复制：零宽度线。在 PS 中，零宽度的线始终可见：PostScript 将零线宽转换为最小可打印宽度。在屏幕上，当缩放时，它们永远不会引起任何思考，但无论比例如何，它们都是可见的。当我想要渲染非常细的线条，而不用担心我要使用的最终分辨率时，我就使用了它们，结果证明它们非常有用。
然而，在官方 SVG 文档（https://www.w3.org/TR/svg-lines/）中它说：
零值将导致不绘制任何笔画。负值无效。
SVG 中有没有一种方法可以构建 PostScript 意义上的零宽度线条？
推荐指数
解决办法
查看次数
在 React 和 Material-UI 中，如何使我的 Grid 项目占据 100% 的可用水平空间而不换行到下一行？
我在 React 16.10 应用程序中使用 Material-UI。我想在左列中显示一个带有图标的表格，然后在右列中显示一个标签和地址，它们彼此堆叠在一起。我希望右列中的项目占据 100% 的可用空间。所以我有这个类\n\xc2\xa0
\nfullWidth:\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0backgroundColor:\xc2\xa0"red",\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0width:\xc2\xa0"100%",\n\xc2\xa0\xc2\xa0},\n（背景颜色只是为了让我可以看到发生了什么）。我创建了这张表...
\n <Grid container direction="row" alignItems="top" spacing={1} className={classes.fullWidth}>\n <Grid item>\n <LocationOnIcon />\n </Grid>\n <Grid item>\n <Grid container direction="column" alignItems="center">\n <Grid item className={classes.fullWidth} style={{backgroundColor: "yellow"}}>\n <TextField\n className={`${classes.rootInput} ${classes.input}`}\n id="pickupLocationLabel"\n value={values.pickUpLocationLabel}\n placeholder="Label"\n variant="outlined"\n disabled={false}\n onChange={handleChangePickUpLocationLabel}\n fullWidth\n />\n </Grid>\n <Grid item className={classes.fullWidth}>\n <AddressInput\n className={classes.textField}\n placeholder={values.pickUpLocation?.address}\n stage={values.pickUpLocation}\n setStage={handleChangeLocation.bind(null, "pickUpLocation")}\n setLocation={handleChangeLocation}\n />\n </Grid>\n </Grid>\n </Grid>\n </Grid>\n然而，这些项目并没有占据 100% 的可用宽度......
\n
当我将 fullWidth 类添加到父容器时，
\n <Grid container direction="row" alignItems="top" spacing={1} className={classes.fullWidth}>\n <Grid item>\n <LocationOnIcon …推荐指数
解决办法
查看次数
使用 flex 去除溢出包装中的额外水平宽度
本质上，我试图删除/防止当块元素的水平行包裹任何块元素时创建的额外水平宽度。也就是说，我希望div包含溢出元素的宽度恰好是非包装元素的大小。
可以使用以下代码查看有问题的问题：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<div class="card">
<div class="card-content">
<div>
<div class="row">
<p class="note-title">This is a relatively lengthy example title for example purposes.</p>
<div>
<div class="row">
<div class="note-tags-list">
<p id="blank-tag">.</p>
<p class="tag note-tag">crunchy</p>
<p class="tag note-tag">recipe</p>
<p class="tag note-tag">carrot</p>
</div>
<p id="text-that-should-stay">I stay</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
/* example.css */
@import "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css";
#text-that-should-stay {
white-space: nowrap;
color: white;
}
#blank-tag {
width: 30px;
min-width: 30px; …推荐指数
解决办法
查看次数
在 CSS 中如何使用 100% 和 max-content 之间的最大值
所以我需要始终将宽度设置为 100%，除非最大内容较长。
width: max(100%, max-content);
类似的东西但不起作用
推荐指数
解决办法
查看次数