英文:
display on left most and right most sides (html css)
问题
I have a banner as follows:
I need to display the Title on the leftmost side and the icon on the rightmost side.
Here is my code:
<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'
}
How do I fix this?
英文:
I have a banner a follows:
I need to display Title on left most side and icon on the right most side.
Here is my code:
<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'
}
How do I fix this?
答案1
得分: 1
你混合了两种元素放置的方法：flex 和浮动。
使用浮动的示例：
.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>
英文:
You mixed 2 approaches for element placement: flex and floating.
The example with floating:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.root {
background-color: darkblue;
color: white;
height: 40px;
padding: 10px;
width: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
<!-- language: lang-html -->
<div class="root" role="banner">
<div class="left"> Title </div>
<div class="right">Settings</div>
</div>
<!-- end snippet -->
The example with flexbox:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.root {
display: flex;
justify-content: space-between;
align-items: center;
background-color: darkblue;
color: white;
height: 40px;
padding: 10px;
width: 100%;
}
<!-- language: lang-html -->
<div class="root" role="banner">
<div class="left"> Title </div>
<div class="right">Settings</div>
</div>
<!-- end snippet -->
答案2
得分: 1
我可以提出这样的建议；通过使用justifyContent: 'space-between'，内部的项目将在水平方向上均匀分布在左右两侧。并且通过alignItems: 'center'，项目将在垂直方向上居中对齐。
英文:
I can make a suggestion like this; This way, by using justifyContent: 'space-between', the items inside will be evenly distributed horizontally between the left and right sides. And with alignItems: 'center', the items will be vertically aligned at the center.
答案3
得分: 1
如果您正在使用弹性盒子，请将最左侧的 <div> 的 flex-grow 设置为 1。这将把图标推到最右边。弹性项目会自动收缩到其内容的大小，除非您另有规定。
CSS Tricks 上有一篇关于 弹性盒子 的好文章，这里有一个 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; /* 通过将此值设置为大于零，使左侧的 div 增长，从而将右侧的 div 推到右侧 */
}
<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>
<details>
<summary>英文:</summary>
If you're using flex box then set the flex-grow of your left most div to 1. It'll push the icon all the way to the right. Flex items automatically shrink to the size of their content unless you tell them otherwise.
CSS tricks has a good article on [flexbox][1] and here's a [2] by Scrimba on flex-grow and flex-shrink
Marked up code below:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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 */
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
[1]: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
[2]: https://www.youtube.com/watch?v=sanswTlz4ZY
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论