英文:
How do I get the exact width of the inner text in CSS?
问题
以下是翻译好的内容：
"Hi, I need to know the exact width of the inner text in CSS. As you can see in the image, I want those menu items to have a proper width respectively, not including paddings or margins, so that I can give them a hover effect like "Posts" item. Is there any method I can use to get the width of the inner text?"
"嗨，我需要知道CSS中内部文本的确切宽度。正如您在图像中所看到的，我希望这些菜单项分别具有适当的宽度，不包括填充或边距，以便我可以为它们提供类似“Posts”项目的悬停效果。是否有任何方法可以用来获取内部文本的宽度？"
如果您需要更多帮助，请随时提问。
英文:
Hi, I need to know the exact width of the inner text in CSS. As you can see in the image, I want those menu items to have a proper width respectively, not including paddings or margins, so that I can give them a hover effect like "Posts" item. Is there any method I can use to get the width of the inner text?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
/* Basic settings */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,400,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: all .3s;
color: #333;
}
a {
text-decoration: none;
color: inherit;
}
li {
list-style-type: none;
}
img {
border: 0;
}
html, body {
height: 100%;
}
body {
font-family: "Roboto", Helvetica, sans-serif;
}
/* Main */
body {
background-color: whitesmoke;
}
header {
border-bottom: 1px solid #EEE;
height: 70px;
overflow: hidden;
background-color: white;
}
header > div {
vertical-align: middle;
}
header > #logo {
width: 15%;
padding: 20px;
border-right: 1px solid #EEE;
text-align: right;
display: inline-block;
}
header > #logo img {
width: 30px;
height: auto;
}
header > #search {
border-right: 1px solid #EEE;
width: 200px;
display: inline-block;
padding: 20px;
}
header > #search input {
border: 0;
outline: 0;
display: inline-block;
width: 80%;
vertical-align: middle;
padding-left: 10px;
}
header > #search a {
font-size: 1.2rem;
display: inline-block;
vertical-align: middle;
width: 20%;
}
header > #search > #search-box {
border: 1px solid #CCC;
border-radius: 100px;
overflow: hidden;
}
header > #gnb {
height: 70px;
display: inline-block;
vertical-align: middle;
border-right: 1px solid #EEE;
}
header > #gnb ul {
margin: 0 30px;
line-height: 70px;
}
header > #gnb li {
display: inline-block;
}
header > #gnb li:not(:last-child) {
margin-right: 20px;
}
header > #gnb a {
display: inline-block;
font-weight: lighter;
}
header > #gnb a:hover {
transform: translateY(-5px);
}
.premium {
color: orangered;
}
#social-media-icons {
display: inline-block;
vertical-align: middle;
border-right: 1px solid #EEE;
height: 70px;
}
#social-media-icons ul {
padding: 0 20px;
line-height: 70px;
}
#social-media-icons li {
display: inline-block;
}
#social-media-icons li:not(:last-child) {
margin-right: 15px;
}
#social-media-icons li a {
font-size: 2rem;
display: inline-block;
}
#social-media-icons li a:hover {
transform: translateY(-5px);
}
#profile {
display: inline-block;
vertical-align: middle;
}
#profile a {
margin-left: 20px;
}
#profile a img {
width: 50px;
height: 50px;
border-radius: 50%;
}
#sub-header {
border-bottom: 1px solid #EEE;
height: 50px;
background-color: white;
}
#sub-header ul {
width: 800px;
margin: 0 auto;
}
#sub-header li {
line-height: 47px;
display: inline-block;
border-bottom: 3px solid transparent;
padding: 0 20px;
}
#sub-header li:hover {
border-bottom: 3px solid cornflowerblue !important;
}
#sub-header a {
text-align: center;
display: inline-block;
width: 100%;
}
.selected {
border-bottom: 3px solid cornflowerblue !important;
}
main {
width: 1000px;
margin: 30px auto;
}
aside {
width: 200px;
background-color: white;
}
#bill-gates {
padding: 20px;
border-bottom: 1px solid #EEE;
}
#bill-gates-image {
margin-bottom: 20px;
}
#bill-gates-image > img {
margin: 0 auto;
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
}
#bill-gates-bio {
text-align: center;
margin-bottom: 30px;
}
#bill-gates-bio > h2 {
margin-bottom: 5px;
}
#bill-gates-bio > p {
font-weight: lighter;
margin-bottom: 3px;
}
#bill-gates-bio > p:last-child {
color: #CCC;
}
#bill-gates-follow-button {
text-align: center;
margin-bottom: 10px;
}
#bill-gates-follow-button > a {
display: inline-block;
line-height: 20px;
padding: 10px 50px;
background-color: cornflowerblue;
color: white;
border-radius: 30px;
border: 1px solid transparent;
}
#bill-gates-follow-button > a:hover {
background-color: rgb(70, 134, 253);
}
#bill-gates-connect-button {
text-align: center;
}
#bill-gates-connect-button > a {
line-height: 20px;
display: inline-block;
padding: 10px 40px;
background-color: white;
color: cornflowerblue;
border: 1px solid cornflowerblue;
border-radius: 30px;
}
#bill-gates-connect-button > a:hover {
background-color: #EEE;
}
#aside-middle {
overflow: hidden;
border-bottom: 1px solid #EEE;
height: 80px;
}
#connections {
text-align: center;
float: left;
width: 50%;
height: 100%;
border-right: 1px solid #EEE;
}
#followers {
text-align: center;
float: right;
width: 50%;
height: 100%;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Bill Gates</title>
</head>
<body>
<header>
<div id="logo">
<a href="#">
<img src="./img/logo.png" alt="LinkedIn logo">
</a>
</div><!--
--><div id="search">
<div id="search-box">
<input type="search" name="search" placeholder="Search"><!--
--><a href="#">🔍</a>
</div>
</div><!--
--><div id="gnb">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Profile</a>
</li>
<li>
<a href="#">Connections</a>
</li>
<li>
<a href="#">Interest</a>
</li>
<li class="premium">
<a href="#">Try Premium</a>
</li>
</ul>
</div><!--
--><div id="social-media-icons">
<ul>
<li>
<a href="#">🗣</a>
</li>
<li>
<a href="#">🔔</a>
</li>
<li>
<a href="#">➕</a>
</li>
</ul>
</div><!--
--><div id="profile">
<a href="#">
<img src="./img/avatar.jpg" alt="Profile image">
</a>
</div>
</header>
<div id="sub-header">
<ul>
<li class="selected">
<a href="#">Posts</a>
</li><li>
<a href="#">Background</a>
</li><li>
<a href="#">Recommendations</a>
</li><li>
<a href="#">Following</a>
</li>
</ul>
</div>
<main>
<aside>
<div id="bill-gates">
<div id="bill-gates-image">
<img src="./img/bill-gates-avatar.png" alt="Bill Gates Profile image">
</div>
<div id="bill-gates-bio">
<h2>Bill Gates</h2>
<p>Microsoft Founder</p>
<p>Greater Seattle Area</p>
</div>
<div id="bill-gates-follow-button">
<a href="#">Follow</a>
</div>
<div id="bill-gates-connect-button">
<a href="#">Connect ↓</a>
</div>
</div>
<div id="aside-middle">
<div id="connections">
<h3>200</h3>
<p>connections</p>
</div>
<div id="followers">
<h3>1.9M</h3>
<p>followers</p>
</div>
</div>
</aside>
</main>
</body>
</html>
<!-- end snippet -->
答案1
得分: 1
使用元素的width属性，它获取内容区域的宽度，不包括任何内边距、边框或外边距。
.bg-tag {
font-family: Arial, sans-serif;
font-size: 14px;
text-decoration: none;
}
.bg-tag:focus {
padding-bottom: 2px;
border-bottom: 2px solid #000; #根据需要更改颜色
width: 100%;
}
<a href="#" class="bg-tag">Background</a>
英文:
Use the width property of an element, which gets the width of the content area excluding any paddings, borders or margins.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.bg-tag {
font-family: Arial, sans-serif;
font-size: 14px;
text-decoration: none;
}
.bg-tag:focus {
padding-bottom: 2px;
border-bottom: 2px solid #000; #change colour as you like
width: 100%;
}
<!-- language: lang-html -->
<a href="#" class="bg-tag">Background</a>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论