Getting a span element fill the space in a div

前端 未结 3 865
野趣味
野趣味 2021-02-15 17:13

I\'m trying to have something like this:

|--------------fixed width---------------|
 Title1 .......................... value1
 Title2 ................... another valu         


        
相关标签:
3条回答
  • 2021-02-15 17:27

    for this you need to change the html structure like this

    html

    <div class="container">
      <span class="left">Title</span>
      <span class="right">value</span>
      <span class="center">&nbsp;</span>
    </div>
    

    and here is the css for .center span

    .center {
        text-align: center;
        border-bottom: 1px dotted blue;
        display:block;
    }
    

    jsFiddle File

    0 讨论(0)
  • 2021-02-15 17:34

    If you reorder your HTML, you can get a simple solution:

    <div class="container">
      <span class="left">Title</span>
      <span class="right">value</span>
      <span class="center">&nbsp;</span>
    </div>
    

    Place the two floated elements ahead of the .center element. The .center element will be in regular content flow and wrap around the left and right content.

    The CSS:

    .center {
        display: block;
        border-bottom: 1px dotted blue;
        overflow: auto;
        position: relative;
        top: -4px;
    }
    
    .right {
        float: right;
        margin-left: 10px;
    }
    
    .left {
        float: left;
        margin-right: 10px;
    }
    
    .container {
        width: 200px;
        border: 1px dotted red;
        padding: 5px;
    }
    

    When you float an element, the display type computes to block, so no need to declare it.

    Also, for .center, if you add overflow: auto, you constrain the block so it does not extend beyond the edges of the floated elements. As a result, your bottom border does not underline the title and value text.

    Finally, you can add position: relative and move the .center up a few pixels to align the border closer to the baseline of the text.

    Fiddle: http://jsfiddle.net/audetwebdesign/DPFYD/

    0 讨论(0)
  • 2021-02-15 17:35

    Meanwhile Flexbox has full browser support, which allows for a more elegant solution without the center element.

    .left, .right {
        border: 1px dotted red;      
    }
    
    .container {
        display: flex;
        justify-content: space-between;
        width: 200px;
        border: 1px dotted red;
        padding: 5px;
    }
    <div class="container">
      <span class="left">Title</span>   
      <span class="right">value</span>
    </div>

    0 讨论(0)
提交回复
热议问题