如何在 CSS 的内联块中移动文本？
[英]How do I shift text over in an inline-block in CSS?
问题描述
I am trying to move the Status/Actions Text over to the left but no matter how much I mess with the CSS nothing works!
我试图将状态/操作文本移到左侧，但无论我如何弄乱 CSS 都没有任何效果！ What it is supposed to look like它应该是什么样子
HTML code for that section该部分的 HTML 代码
.top { background: #1b1b1e; width: 1650px; margin: auto; } li a { display: inline—block; padding: 1em; color: #9c9c9c; text-decoration: none; text-align: left; font-size: 25px; letter-spacing: 1.1px; font-weight: bold; margin-right: 10em; }
<div class="top"> <ul> <li><a href="#" id="linkText">Link</a></li> <li><a href="#" id="statusText">Status</a></li> <li><a href="#" id="actionText">Action</a></li> </ul> </div>
6 个解决方案
解决方案1
0 2020-01-07 06:35:58
Please apply this :请应用此：
.top { background: #1b1b1e; display: flex; align-items: center; justify-content: space-between; } .link-wrap { width: 300px; padding-left: 20px; } .top ul { display: flex; width: 400px; justify-content: space-between; list-style-type: none; } .top ul li { padding-right: 25px; } .top ul li a, .link-wrap a { display: inline—block; color: #9c9c9c; text-decoration: none; font-size: 25px; letter-spacing: 1.1px; font-weight: bold; } .link-wrap a { width: 300px; }
<div class="top"> <div class="link-wrap"> <a href="#" id="linkText">Link</a> </div> <ul> <li><a href="#" id="statusText">Status</a></li> <li><a href="#" id="actionText">Action</a></li> </ul> </div>
If any changes please let me know.如果有任何更改，请告诉我。
解决方案2
0 2020-01-07 06:44:39
.top { background: #1b1b1e; width: 100%; margin: auto; float: left; padding: 10px 0; } .top ul { margin: 0px; padding: 0px; } .top li { list-style-type: none; float: left; width: 230px; } li a { display: inline—block; padding: 1em; color: #9c9c9c; text-decoration: none; text-align: left; font-size: 25px; letter-spacing: 1.1px; font-weight: bold; } .statusText { float: right !important; } .actionText { float: right !important; max-width: 149px; }
<div class="top"> <ul> <li class="linkText"><a href="#" id="linkText">Link</a></li> <li class="actionText"><a href="#" id="actionText">Action</a></li> <li class="statusText"><a href="#" id="statusText">Status</a></li> </ul> </div>解决方案3
0 2020-01-07 06:50:26
您可以使用 flexbox order 属性： https ://www.w3schools.com/css/css3_flexbox.asp
解决方案4
0 2020-01-07 06:52:34
If you are good to go with flex, a few lines of code will fix your issue.如果你很擅长使用 flex，几行代码就可以解决你的问题。
display: flex;显示：弹性；
.top { background: #1b1b1e; /* width: 1650px; */ width: 100%; margin: auto; } ul { display: flex; } li { list-style: none; } .statusText { margin-left: auto; } li a { display: inline—block; padding: 1em; color: #9c9c9c; text-decoration: none; text-align: left; font-size: 25px; letter-spacing: 1.1px; font-weight: bold; /* margin-right: 10em; */ }
<div class="top"> <ul> <li><a href="#" id="linkText">Link</a></li> <li class="statusText"><a href="#" id="statusText">Status</a></li> <li><a href="#" id="actionText">Action</a></li> </ul> </div>
If you are interested to go with display inline-block only, you can use the float property.如果您只对 display inline-block 感兴趣，可以使用 float 属性。
display: inline-block;显示：内联块；
.top { background: #1b1b1e; /* width: 1650px; */ width: 100%; margin: auto; } li { display: inline-block;; list-style: none; } li a { display: inline—block; padding: 1em; color: #9c9c9c; text-decoration: none; text-align: left; font-size: 25px; letter-spacing: 1.1px; font-weight: bold; /* margin-right: 10em; */ } .float-right { float: right; }
<div class="top"> <ul> <li><a href="#" id="linkText">Link</a></li> <!-- Reversed Order --> <li class="float-right"><a href="#" id="actionText">Action</a></li> <li class="float-right"><a href="#" id="statusText">Status</a></li> </ul> </div>
解决方案5
0 2020-01-07 07:00:24
.top { background: #1b1b1e; width: 1650px; margin: auto; } ul{ display:flex; flex-direction: row-reverse; } li a { display: inline—block; padding: 1em; color: #9c9c9c; text-decoration: none; text-align: left; font-size: 25px; letter-spacing: 1.1px; font-weight: bold; margin-right: 10em; }
<div class="top"> <ul> <li><a href="#" id="linkText">Link</a></li> <li><a href="#" id="statusText">Status</a></li> <li><a href="#" id="actionText">Action</a></li> </ul> </div>
解决方案6
0 2020-01-07 07:44:35
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .top { background: #1b1b1e; width: 100%; margin: auto; } li { display: inline-block; } li a { display: inline—block; /* padding: 1em; */ color: #9c9c9c; text-decoration: none; text-align: left; font-size: 25px; letter-spacing: 1.1px; font-weight: bold; margin-right: 1em; } ul li:not(:first-child) { float: right; } </style> <body> <div class="top"> <ul> <li><a href="#" id="linkText">Link</a></li> <li><a href="#" id="statusText">Status</a></li> <li><a href="#" id="actionText">Action</a></li> </ul> </div> </body> </html>
Another way to achieve what you want, But I would suggest just like others to use flex box :)实现您想要的另一种方法，但我建议像其他人一样使用 flex box :)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在CSS中使用“内联块”将所有文本居中 - How to middle all text using “inline-block” with CSS
如何使内联块 div 中的文本完全独立于 div 外的任何文本？ - How do I make text in a inline-block div completely independant to any text outside the div?
在CSS转换期间，如何将内联块和表格单元元素保持在同一行？ - How do I keep inline-block and table-cell elements on same line during css transitions?
如何重新排列CSS中内联块的顺序？ - How would I rearrange the order on an inline-block in CSS?
内联块 css - inline-block css
如何在嵌入式块中将图像与文本对齐？ - How can I align my images with text in an inline-block?
如何进行内联拉伸？ - How do I make an inline-block stretch?
如何将可变宽度的内联块元素居中？ - How do I center an inline-block element of variable width?
如何使用CSS内联 - How to make inline-block with CSS
如何用CSS包装内联块中的行？ - How to wrap lines in an inline-block with CSS?
相关标签