У меня есть баннер следующим образом:
Мне нужно отобразить заголовок слева и значок справа.
Вот мой код:
<div className={classNames.root} role="banner">
<div className={classNames.left}> Title </div>
<div className={classNames.right}><SettingsIcon /></div>
</div>
root: [
{
backgroundColor: theme.palette.themePrimary,
height: 40,
color: 'white',
maxWidth: "100%",
margin: '0 auto',
borderBottom: '1px solid transparent',
boxSizing: 'border-box',
display: 'flex',
paddingLeft: 20,
paddingTop: 10
},
className
],
left: {
float: 'left'
},
right: {
fontSize: 20,
float: 'right'
}
Как это исправить?
3 ответа
Вы смешали 2 подхода к размещению элементов: гибкий и плавающий.
Пример с плавающим:
.root {
background-color: darkblue;
color: white;
height: 40px;
padding: 10px;
width: 100%;
}
.left {
float: left;
}
.right {
float: right;
}<div class="root" role="banner">
<div class="left"> Title </div>
<div class="right">Settings</div>
</div>Пример с flexbox:
.root {
display: flex;
justify-content: space-between;
align-items: center;
background-color: darkblue;
color: white;
height: 40px;
padding: 10px;
width: 100%;
}<div class="root" role="banner">
<div class="left"> Title </div>
<div class="right">Settings</div>
</div>Я могу сделать такое предложение; Таким образом, используя justifyContent: 'space-between', элементы внутри будут равномерно распределены по горизонтали между левой и правой сторонами. А с alignItems: 'center' элементы будут вертикально выровнены по центру.
Если вы используете flex box, установите для flex-grow вашего самого левого div значение 1. Он переместит значок полностью вправо. Элементы Flex автоматически уменьшаются до размера их содержимого, если вы не укажете иное.
У CSS-трюков есть хорошая статья на flexbox, и вот видео от Scrimba о flex-grow и flex-shrink
Размеченный код ниже:
.root {
background-color: #0078d4;
height: 40px;
color: white;
margin: 0 auto;
border-bottom: 1px solid transparent;
box-sizing: border-box;
display: flex;
padding-left: 20px;
padding-top: 10px;
}
.left {
flex-grow: 1; /* make the left div grow by setting this to a value greater than zero so it pushes the right div to the right */
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class='root' role="banner">
<div class='left'>Title </div>
<div class='right'><i class="fa-solid fa-circle-info"></i></div>
</div>