Question

我不擅长HTML / CSS术语，所以请随时编辑问题。

你能告诉我如何让某些字段/标签填充由父标签分配的剩余可用空间吗？ 非GWT，html + css示例也可以。

这就是我所拥有的

enter image description here

此示例的HTML代码为 here （由GWT生成）。

如果我改变浏览器窗口边框的大小，则字段集的变化也会占据整个区域。

所以“要求”是：

没有固定宽度值，因为我有几个本地化版本该网站。
包含字段名称的第一列应与最长名称一样宽。在我的情况下，它是“电话号码”，但也可能是其他语言的其他内容。
输入标记应左对齐。输入标记应自动调整大小以占用父节点边界内剩余的空间标签

PersonEditor控件的UiBinder XML是

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:e='urn:import:com.google.gwt.editor.ui.client'

             ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat'
             ui:generateKeys="com.google.gwt.i18n.server.keygen.MD5KeyGenerator"
             ui:generateLocales="en,ru">
    <ui:style src="../common.css"/>
    <g:CaptionPanel ui:field="captionPanel">
        <g:Grid>
            <g:row>
                <g:cell>
                    <div>
                        <ui:msg meaning="person's name">Name:</ui:msg>
                    </div>
                </g:cell>
                <g:customCell>
                    <e:ValueBoxEditorDecorator ui:field="name" stylePrimaryName="{style.editField}">
                        <e:valuebox>
                            <g:TextBox width="100%" stylePrimaryName="{style.editField}"/>
                        </e:valuebox>
                    </e:ValueBoxEditorDecorator>
                </g:customCell>
            </g:row>
            <g:row>
                <g:cell>
                    <div>
                        <ui:msg>Phone Number:</ui:msg>
                    </div>
                </g:cell>
                <g:customCell>
                    <e:ValueBoxEditorDecorator ui:field="phoneNumber" stylePrimaryName="{style.editField}">
                        <e:valuebox>
                            <g:TextBox width="100%" stylePrimaryName="{style.editField}"/>
                        </e:valuebox>
                    </e:ValueBoxEditorDecorator>
                </g:customCell>
            </g:row>
            <g:row>
                <g:cell>
                    <div>
                        <ui:msg>EMail:</ui:msg>
                    </div>
                </g:cell>
                <g:customCell>
                    <e:ValueBoxEditorDecorator ui:field="email" stylePrimaryName="{style.editField}">
                        <e:valuebox>
                            <g:TextBox width="100%" stylePrimaryName="{style.editField}"/>
                        </e:valuebox>
                    </e:ValueBoxEditorDecorator>
                </g:customCell>
            </g:row>
        </g:Grid>
    </g:CaptionPanel>
</ui:UiBinder>

我没有为SenderOrganization提供XML，因为它几乎相同。

Answer 1

你可以这样做。对于某些不允许通过指定左/右定位输入元素的浏览器，“.input-wrapper”是必需的。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      label { line-height: 30px; } 
      .input-wrapper { display: inline-block; position: absolute; left: 200px; right: 50px; } 
      input { width: 100%; }
    </style>
  </head>
  <body>
     <fieldset>
       <legend>Sender organization:</legend>

       <div>
         <label>Name:</label>
         <div class="input-wrapper">
           <input>
         </div>
       <div>

       <div>
         <label>Address:</label>
         <div class="input-wrapper">
           <input>
         </div>
       </div>

       <fieldset>
         <legend>Contact Person:</legend>

         <div>
           <label>Name:</label>
           <div class="input-wrapper">
             <input>
           </div>
         <div>

         <div>
           <label>Phone Number:</label>
           <div class="input-wrapper">
             <input>
           </div>
         </div>

         <div>
           <label>EMail:</label>
           <div class="input-wrapper">
             <input>
           </div>
         </div>
        </fieldset>

     </fieldset>
  </body>
</html>

Answer 2

要使标签列可自动调整，您必须使用table元素。它看起来像这样：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      table { width: 100%; } 
      th { text-align: left; font-weight: normal; white-space: nowrap; } 
      td {  width: 100%; } 
      input { width: 100%; }
    </style>
  </head>
  <body>
     <fieldset>
       <legend>Sender organization:</legend>

       <table>
         <tr>
           <th>Name:</td>
           <td><input></td>
         </tr>
         <tr>
           <th>Address:</td>
           <td><input></td>
         </tr>
       </table>

       <fieldset>
         <legend>Contact Person:</legend>

         <table>
           <tr>
             <th>Name:</td>
             <td><input></td>
           </tr>
           <tr>
             <th>Phone Number:</td>
             <td><input></td>
           </tr>
           <tr>
             <th>EMail:</td>
             <td><input></td>
           </tr>
         </table>

       </fieldset>

     </fieldset>
  </body>
</html>

Answer 3

试试这个。请注意，这只是一个例子。可以很好地处理清洁代码。

http://jsfiddle.net/SX2np/70/

如何制作一个布局，其中某些标签将填充父标签/容器的剩余空间？

3 个答案: