Question

所以我试图创建类似于python解释器的输入提示

它应该是一个包含3个部分的单行：

提示＆＃39;＆gt;＆gt;＆＃39;这一直被推到左边
输入文本区域，只是输入
提交按钮一直推到右边

我的问题是我希望第二个元素自动使用其他两个元素未使用的所有剩余宽度。

这是我最接近的，它几乎是正确的，除了理想情况下输入文本区域会一直延伸到按钮。我也希望能够在没有硬编码宽度的情况下做到这一点

＆＃13;

#top-container {
  width: 600px;
}
#input-prompt {
  /* nothing */
}
#input-area {
  display: inline;
  background-color: #DDDDDD;
}
#input-button{
  float: right;
}

＆＃13;

<div id="top-container">
  <!-- Part 1, the prompt '>>' -->
  <label id="input-prompt">
    >>
  </label>
  <!-- Part 2, the text input area -->
  <div id="input-area" contenteditable>
    (this should be wider)
  </div>
  <!-- Part 3, the submission button -->
  <button id="input-button">Submit</button>
</div>

＆＃13;

Answer 1

您可以使用display:table作为容器，请参阅下面的

<强> CSS：

#top-container {
    width: 600px;
    display:table;
  }
  #input-prompt {    
    background-color: red;
    display: table-cell;
  }
  #input-area {
      width:100%;
    display: table-cell;    
    background-color: #DDDDDD;

  }
  #input-button{  
    background-color:yellow;
    display: table-cell;
  }

#top-container {
    width: 600px;
    display:table;
  }
  #input-prompt {    
    background-color: red;
    display: table-cell;
  }
  #input-area {
      width:100%;
    display: table-cell;    
    background-color: #DDDDDD;
    
  }
  #input-button{  
    background-color:yellow;
    display: table-cell;
  }

<div id="top-container">
  <!-- Part 1, the prompt '>>' -->
  <label id="input-prompt">
    >>
  </label>
  <!-- Part 2, the text input area -->
  <div id="input-area" contenteditable>
    (this should be wider)
  </div>
  <!-- Part 3, the submission button -->
  <button id="input-button">Submit</button>
</div>

Answer 2

以下是一个示例代码：

  #top-container {
    width: 600px;
  }
  #input-prompt {
    float: left;
  }
  #input-area {
    overflow: hidden;
    background-color: #DDDDDD;
  }
  #input-button{
    float: right;
  }

<div id="top-container">
  <!-- Part 1, the prompt '>>' -->
  <label id="input-prompt">
    >>
  </label>  
  <!-- Part 3, the submission button -->
  <button id="input-button">Submit</button>
  <!-- Part 2, the text input area -->
  <div id="input-area" contenteditable>
    (is it OK now?)
  </div>
</div>

阻止overflow:hidden建立新的block formatting context，因此不能重叠浮点数，因此几乎所有浏览器都将它放在浮点数旁边，并使其占用所有可用空间。

或者，您可以使用Flexbox实现相同的布局，但是他们的浏览器支持仍然不理想（尤其是IE9 - ）。

Answer 3

你可以试试这个：

#top-container {
  width: 600px;
}

#input-area {
  display: inline-block;
  background-color: #DDDDDD;
  width:89%;
}

#input-area:before{
  content:'>>'
}

#input-button{
  display:inline-block
}

Answer 4

这为提示和按钮保留固定区域，并使输入框覆盖剩余区域：

#top-container {
    position: relative;
    width: 600px;
}
#input-prompt {
    display: inline-block;
}
#input-area {
    position: absolute; top: 0; left: 1.5em; right: 4.5em;
    background-color: #DDDDDD;
}
#input-button{
    position: absolute; top: 0; right: 0;
}

希望HTML元素占用尽可能宽的宽度

4 个答案: