【问题标题】:Border is not coming properly in div cssdiv css中的边框没有正确显示
【发布时间】:2015-10-26 19:32:53
【问题描述】:

我正在尝试创建一个类似于输入系统的标签,但运行时遇到 css 问题。

我期望的是绿色应该有边界并将 2 个 div 包裹在其中,但事实并非如此。检查fiddle

这是我创建标签的链接,如系统https://stackoverflow.com/a/10839632/639406

我的代码 -

<div class="master" style="border: 1px solid #3ef001; width: 200px;">
    <div class="tagCont" style="float: left;">
        <span>HTML</span>
        <span>CSS</span>
        <span>PHP</span>
    </div>

    <div class="inputElem" style="float: right;">
        <input type="text" />
    </div>
</div>

除了一个解决方案之外,我还在寻找我对这个概念的错误之处,因为我对 CSS 部分不是很好。

【问题讨论】:

    标签: javascript html css


    【解决方案1】:

    您需要将display:inline-block; 添加到您的.master div 中,以使边框按您的意愿运行。

    <div class="master" style="border: 1px solid #3ef001; width: 200px; display:inline-block;">
        <div class="tagCont" style="float: left;">
            <span>HTML</span>
            <span>CSS</span>
            <span>PHP</span>
        </div>
    
        <div class="inputElem" style="float: right;">
            <input type="text" />
        </div>
    </div>
    

    https://jsfiddle.net/m3shyss6/

    就概念而言,您遇到了问题,因为 div 没有占用其内容的大小。将其显示属性更改为 inline-block 允许发生这种情况。

    【讨论】:

      【解决方案2】:

      你需要添加一个clearfix:

      https://jsfiddle.net/aqh5ngq4/1/

      .master::after {
        content: "";
        display: table;
        clear: both;
      }
      <div class="master" style="border: 1px solid #3ef001; width: 200px;">
        <div class="tagCont" style="float: left;">
          <span>HTML</span>
          <span>CSS</span>
          <span>PHP</span>
        </div>
      
        <div class="inputElem" style="float: right;">
          <input type="text" />
        </div>
      </div>

      【讨论】:

        猜你喜欢
        • 2015-01-01
        • 1970-01-01
        • 2013-06-04
        • 1970-01-01
        • 2022-01-17
        • 1970-01-01
        • 2011-11-03
        • 1970-01-01
        • 2010-11-23
        相关资源
        最近更新 更多