Question

我正在绘制的边框现在填满了屏幕的整个宽度。我希望缩小到子元素的大小。

我曾尝试向flexbox添加border属性，但正如我所说，它会填满整个屏幕。

 <div class="mainThing">
     <div class="thing_row">
         <div class="thing_img">
             <img src="url" height="60">
         </div>
         <div class="thing_texts">
             <div class="noa_txt">NOW ON AIR</div>
             <div class="main_txt">The Royal Sunrise</div>
             <div class="peeps_txt">Meth, Pavan, Thinula and Jayavi</div>
         </div>
     </div>
 </div>

.thing_row{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    border: solid black;
    flex-basis: content;
}

我希望画出边框，使其紧密适合子元素，但它会填满屏幕的整个宽度。

Answer 1

使用func isNearBy(city: Observable<String?>) -> Observable<Bool> { return city .distinctUntilChanged() .map {$0 ?? ""} .map {$0 == ""} }时，元素默认为其原始宽度100％，

在display:flex上使用display:inline-flex ....，它将折叠成孩子的大小。

.thing-row

.thing_row {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  border: 1px solid black;
  flex-basis: content;
}

Answer 2

您缺少border-width。

尝试此操作或在此处查看：https://www.w3schools.com/css/css_border.asp

border-style: solid;
border-width: 5px;

如何在弹性框内的元素周围创建边框

2 个答案: