0

我想让第一个输入的宽度为 100%，第二个 + 图像 = 100%，以便第二个输入在同一行上获得其余空间（100%-img 大小）。可以使用CSS吗？

<html><head><title>width test</title>
<style type="text/css">
.t {
    width: 100%;
    table-layout:fixed;

}
.caption {
    text-align: left;
    width: 35%;
}
.data {
    text-align: left;
    width: 65%;
}
.edt {
    width: 100%;
}
</style>
</head>
<body>
<table class="t">
    <tr>
        <td class="caption">Caption:</td>
        <td class="data"><input type="text" class="edt" /></td>
    </tr>
    <tr>
        <td class="caption">Caption:</td>
        <td class="data">
            <input type="text" class="edt" /><a href="#"><img width="22px" src="cal.png" /></a>
        </td>
    </tr>
</table>
</body>
</html>

4

4 回答 4

1

是的，这可以通过 CSS 来完成。诀窍是使用display: tableand display: table-cell，其中 wherewidth: 100%表示“剩余的可用空间”。

这是一个示例（带有包装器 div.edt和图像链接以获得更好的结果）：http: //jsfiddle.net/zgw8q7vj/

重要的 CSS 部分如下：

/*Use "table" layout in the 'data' cells, 
  and give them all the available width (after the captions)*/
.data {
    display: table;
    width: 100%;
}
/*Then give the textbox all the available remaining width...*/
.edt-wrapper {
    display: table-cell;
    width: 100%;
}
/*...after the image has claimed the space it needs*/
.img-wrapper {
    display: table-cell;
}

如果您不希望标题列占用比它需要的更多的空间，您甚至可以删除table-layout:fixed;and width: 35%;from .tand.caption

于 2015-03-10T22:25:58.370 回答
0

未经测试。你没有提到 colspans 不能使用，所以这个解决方案使用它。

<table class="t">
    <tr>
        <td class="caption">Caption:</td>
        <td class="data"><input type="text" class="edt" /></td>
    </tr>
    <tr>
        <td class="caption">Caption:</td>
        <td colspan="3"><input type="text" class="edt" /></td>
        <td class="data"><a href="#"><img width="22px" src="cal.png" /></a>
        </td>
    </tr>
</table>
于 2009-07-18T05:16:33.483 回答
0

我发现我可以用桌子做到这一点。问题仍然存在，是否可以与 div/css 相关？

<html><head><title>width test</title>
<style type="text/css">
.t {
    width: 100%;
    table-layout:fixed;

}
.caption {
    text-align: left;
    width: 35%;
}
.data {
    text-align: left;
    width: 65%;
}
.edt {
    width: 100%;
}
.joiningtable
{
    border-spacing:0px;
    border-collapse:collapse;
    width:100%;
    margin:0px;
    border:0px;
    padding:0px;
}
.joiningrest
{
    width:100%;
    margin:0px;
    border:0px;
    padding:0px;
}
.joiningfixed
{
    margin:0px;
    border:0px;
    padding:0px;
}
</style>
</head>
<body>
<table class="t">
    <tr>
        <td class="caption">Caption:</td>
        <td class="data"><input type="text" class="edt" /></td>
    </tr>
    <tr>
        <td class="caption">Caption:</td>
        <td class="data">
            <table class="joiningtable">
                <tr><td class="joiningrest"><input type="text" class="edt" /></td><td class="joiningfixed"><a href="#"><img src="cal.png" /></a></td><tr>
            <table>
        </td>
    </tr>
</table>
</body>
</html>

于 2009-07-18T05:39:54.060 回答
0

如果您仍然感兴趣，这是可能的，但您需要使用一点魔法..

使用绝对定位，您可以将这些输入字段拉伸到您喜欢的宽度，或者更确切地说，将它们拉伸到 100% 并将它们放在您喜欢的宽度范围内，因为输入字段是顽固的东西，不会以其他方式表现.

<html>
<body>
<div style="background-color:#DDDDFF; position:absolute; left:10px; top:10px; right:10px; height:80px;">
<span style="position:absolute; left:10px; top:10px;">Caption</span>
<span style="position:absolute; left:10px; top:40px;">Caption</span>
<span style="position:absolute; left:70px; top:10px; right:10px;">
<input type="text" style="width:100%" />
</span>
<span style="position:absolute; left:70px; top:40px; right:40px;">
<input type="text" style="width:100%" />
</span>
<img style="width:22px; position:absolute; top:40px; right:10px;" src="cal.png" />
</div>
<div>
</div>

</body>
</html>

PS 为了简单起见，我在实体上留下了样式定义。在实际情况下，我当然会将它们移动到 .css 文件中。

于 2010-02-03T00:11:05.227 回答