我想要中心的div水平与一个选项滚动使用CSS。我怎样才能做到呢?我看到了一个解决方案使用边距自动和最大宽度,但div将被削减,所以我没有这样做。
null
.az-chips-btns-parent {
overflow : auto;
margin : auto;
max-width : 30rem;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<div class="az-chips-btns-parent">
<div class="az-chips-btns">
<div class="az-save-filters-parent" style="margin-top: 1.5px;">
<button type="button" class="btn p-0 rounded-circle az-save-filters-chip ui-btn ui-shadow ui-corner-all">
<i class="fa fa-star az-save-filters" style="font-size: 15px;"></i>
</button>
</div>
<button type="button" class="btn az-country-chip ui-btn ui-shadow ui-corner-all">
<div>Country</div>
<div class="az-country-selected-chip az-selected-chip text-danger">3 selected</div>
</button>
<button type="button" class="btn az-brand-chip ui-btn ui-shadow ui-corner-all">
<div>Brand</div>
<div class="az-brand-selected-chip az-selected-chip text-danger"></div>
</button>
<button type="button" class="btn az-location-chip ui-btn ui-shadow ui-corner-all">
<div>Location</div>
<div class="az-location-selected-chip az-selected-chip text-danger"></div>
</button>
<button type="button" class="btn az-store-chip ui-btn ui-shadow ui-corner-all">
<div>Store</div>
<div class="az-store-selected-chip az-selected-chip text-danger"></div>
</button>
<button type="button" class="btn az-section-chip ui-btn ui-shadow ui-corner-all">
<div>Section</div>
<div class="az-section-selected-chip az-selected-chip text-danger"></div>
</button>
</div>
</div>
null
如果答案适用于OP,那么我会给出一个描述。
null
body {
height: 5000px;
}
.az-chips-btns-parent {
overflow : auto;
margin : auto;
max-width : 30rem;
position: fixed;
left: 50%;
transform: translateX(-50%);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<div class="az-chips-btns-parent">
<div class="az-chips-btns">
<div class="az-save-filters-parent" style="margin-top: 1.5px;">
<button type="button" class="btn p-0 rounded-circle az-save-filters-chip ui-btn ui-shadow ui-corner-all">
<i class="fa fa-star az-save-filters" style="font-size: 15px;"></i>
</button>
</div>
<button type="button" class="btn az-country-chip ui-btn ui-shadow ui-corner-all">
<div>Country</div>
<div class="az-country-selected-chip az-selected-chip text-danger">3 selected</div>
</button>
<button type="button" class="btn az-brand-chip ui-btn ui-shadow ui-corner-all">
<div>Brand</div>
<div class="az-brand-selected-chip az-selected-chip text-danger"></div>
</button>
<button type="button" class="btn az-location-chip ui-btn ui-shadow ui-corner-all">
<div>Location</div>
<div class="az-location-selected-chip az-selected-chip text-danger"></div>
</button>
<button type="button" class="btn az-store-chip ui-btn ui-shadow ui-corner-all">
<div>Store</div>
<div class="az-store-selected-chip az-selected-chip text-danger"></div>
</button>
<button type="button" class="btn az-section-chip ui-btn ui-shadow ui-corner-all">
<div>Section</div>
<div class="az-section-selected-chip az-selected-chip text-danger"></div>
</button>
</div>
</div>