>

아래 이미지는 내 문제를 보여줍니다. 텍스트가 유연하게 표시되어 쌓여 있습니다. 이 필드와 같이 더 많은 필드가 있으므로 모든 필드에 너비를 설정하고 싶지 않습니다.

너비 : 자동을 시도했지만 작동하지 않습니다.

너비를 약 15 %로 확장 할 수 있지만이 필드와 같이 더 많은 필드를 가지므로 모든 너비를 설정하고 싶지 않습니다.

<div class="container">
        <h2>Section I.</h2>
        <div class="row">
            <div class="col one">
                <label for="origin__location">Origin Location</label>
                <div class="underline"></div>
            </div>
        </div>
    </div>

    [.container{
    margin-left: 1em;
  }
  .row{
    width: 100%;
    display: flex;
    margin-bottom: 2em;
    margin-left: 10px;
  }
  .col{
    display: flex;
  }
  .one{
    flex: 1;
  }
  label{
    width: auto;
  }
  .underline{
    border-bottom: solid .5px #000;
    width: 100%;
    margin-left: 1em;
  }

텍스트가 한 줄로되어 있고 이미 가지고있는 것보다 더 많거나 적은 문자가있는 단어를 처리하고 싶습니다.

  • 답변 # 1

    white-space:pre; 를 추가했습니다   label 로 .

    .container{
        margin-left: 1em;
      }
      .row{
        width: 100%;
        display: flex;
        margin-bottom: 2em;
        margin-left: 10px;
      }
      .col{
        display: flex;
      }
      .one{
        flex: 1;
      }
      label{
        width: auto;
        white-space:pre;
      }
      .underline{
        border-bottom: solid .5px #000;
        width: 100%;
        margin-left: 1em;
      }
    
    

    <div class="container">
            <h2>Section I.</h2>
            <div class="row">
                <div class="col one">
                    <label for="origin__location">Origin Location</label>
                    <div class="underline"></div>
                </div>
            </div>
    </div>
    
    

  • 답변 # 2

    와이즈 비즈를 설정할 수 있습니다  당신을 위해 정의 width 요소, 고정 너비 또는 백분율 :

    label
    
    

     .container{
        margin-left: 1em;
      }
      .row{
        width: 100%;
        display: flex;
        margin-bottom: 2em;
        margin-left: 10px;
      }
      .col{
        display: flex;
        width: 120px;
      }
      .one{
        flex: 1;
      }
      label{
        width: 25%;
      }
      .underline{
        border-bottom: 0.5px  solid black;
        width: 100%;
        margin-left: 1em;
      }
    
    

    <div class="container"> <h2>Section I.</h2> <div class="row"> <div class="col one"> <label for="origin__location">Origin Location</label> <div class="underline"></div> </div> </div> </div>

  • 이전 fish - 두 개의 인수로 탭 완성을 명령에 추가하는 방법은 무엇입니까?
  • 다음 java - nosuchmethoderror - orgspringframeworkbeansfactoryconfigconfigurablelistablebeanfactory