Question

我有一个带有边框的子div，它应该只包装文本。但是，它似乎继承了父div的宽度。

<p id="load_data"></p>

如何制作＆＃39;文字＆＃39;的宽度？不继承其父div的宽度？我希望它的宽度与文本一样长。

Answer 1

在contentContainer div

上使用

 
.contentContainer {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  align-items: flex-start;
}

.text {
  border: 1px solid black;
}

样式

＆＃13;

<div>
  <div class="contentContainer">
<div>
  <div>Title</div>
  <div>Posted by u/user1</div>
</div>  
<span class="text">
  Text
</span>
  </div>
</div>

＆＃13;

public static void AllIn() {
    System.out.println("Please select your menu option: ");
    while(true) {
        try {
            MenuSelect = Input.nextInt();           
        }
        catch (InputMismatchException e) {
            System.out.println("That's not a valid number!");
            // added this line to make Scanner omit last newline
            Input.nextLine();
        }
    }

 }

＆＃13;

Answer 2

使用 width: fit-content;到.text

＆＃13;

.contentContainer {
  display: flex;
  flex-direction: column;
  margin-bottom: 15;
}

.text {
  border: 1px solid black;
      width: fit-content;
}

＆＃13;

<div>
  <div class="contentContainer">
    <div>
      <div>Title</div>
      <div>Posted by u/user1</div>
    </div>  
    <div class="text">
      Text
    </div>
  </div>
</div>

＆＃13;

防止子div继承父宽度

2 个答案: