如何在CSS中获取内部文本的精确宽度？

huangapple
go评论119阅读模式
英文:

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”项目的悬停效果。是否有任何方法可以用来获取内部文本的宽度？"

如果您需要更多帮助，请随时提问。

英文:

如何在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?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. /* Basic settings */
  2. @import url(&#39;https://fonts.googleapis.com/css?family=Roboto:100,400,700&amp;display=swap&#39;);
  3. * {
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7.     transition: all .3s;
  8.     color: #333;
  9. }
  10. a {
  11.     text-decoration: none;
  12.     color: inherit;
  13. }
  14. li {
  15.     list-style-type: none;
  16. }
  17. img {
  18.     border: 0;
  19. }
  20. html, body {
  21.     height: 100%;
  22. }
  23. body {
  24.     font-family: &quot;Roboto&quot;, Helvetica, sans-serif;
  25. }
  27. /* Main */
  28. body {
  29.     background-color: whitesmoke;
  30. }
  31. header {
  32.     border-bottom: 1px solid #EEE;
  33.     height: 70px;
  34.     overflow: hidden;
  35.     background-color: white;
  36. }
  37. header &gt; div {
  38.     vertical-align: middle;
  39. }
  40. header &gt; #logo {
  41.     width: 15%;
  42.     padding: 20px;
  43.     border-right: 1px solid #EEE;
  44.     text-align: right;
  45.     display: inline-block;
  46. }
  47. header &gt; #logo img {
  48.     width: 30px;
  49.     height: auto;
  50. }
  51. header &gt; #search {
  52.     border-right: 1px solid #EEE;
  53.     width: 200px;
  54.     display: inline-block;
  55.     padding: 20px;
  56. }
  57. header &gt; #search input {
  58.     border: 0;
  59.     outline: 0;
  60.     display: inline-block;
  61.     width: 80%;
  62.     vertical-align: middle;
  63.     padding-left: 10px;
  64. }
  65. header &gt; #search a {
  66.     font-size: 1.2rem;
  67.     display: inline-block;
  68.     vertical-align: middle;
  69.     width: 20%;
  70. }
  71. header &gt; #search &gt; #search-box {
  72.     border: 1px solid #CCC;
  73.     border-radius: 100px;
  74.     overflow: hidden;
  75. }
  76. header &gt; #gnb {
  77.     height: 70px;
  78.     display: inline-block;
  79.     vertical-align: middle;
  80.     border-right: 1px solid #EEE;
  81. }
  82. header &gt; #gnb ul {
  83.     margin: 0 30px;
  84.     line-height: 70px;
  85. }
  86. header &gt; #gnb li {
  87.     display: inline-block;
  88. }
  89. header &gt; #gnb li:not(:last-child) {
  90.     margin-right: 20px;
  91. }
  92. header &gt; #gnb a {
  93.     display: inline-block;
  94.     font-weight: lighter;
  95. }
  96. header &gt; #gnb a:hover {
  97.     transform: translateY(-5px);
  98. }
  99. .premium {
  100.     color: orangered;
  101. }
  102. #social-media-icons {
  103.     display: inline-block;
  104.     vertical-align: middle;
  105.     border-right: 1px solid #EEE;
  106.     height: 70px;
  107. }
  108. #social-media-icons ul {
  109.     padding: 0 20px;
  110.     line-height: 70px;
  111. }
  112. #social-media-icons li {
  113.     display: inline-block;
  114. }
  115. #social-media-icons li:not(:last-child) {
  116.     margin-right: 15px;
  117. }
  118. #social-media-icons li a {
  119.     font-size: 2rem;
  120.     display: inline-block;
  121. }
  122. #social-media-icons li a:hover {
  123.     transform: translateY(-5px);
  124. }
  125. #profile {
  126.     display: inline-block;
  127.     vertical-align: middle;
  128. }
  129. #profile a {
  130.     margin-left: 20px;
  131. }
  132. #profile a img {
  133.     width: 50px;
  134.     height: 50px;
  135.     border-radius: 50%;
  136. }
  137. #sub-header {
  138.     border-bottom: 1px solid #EEE;
  139.     height: 50px;
  140.     background-color: white;
  141. }
  142. #sub-header ul {
  143.     width: 800px;
  144.     margin: 0 auto;
  145. }
  146. #sub-header li {
  147.     line-height: 47px;
  148.     display: inline-block;
  149.     border-bottom: 3px solid transparent;
  150.     padding: 0 20px;
  151. }
  152. #sub-header li:hover {
  153.     border-bottom: 3px solid cornflowerblue !important;
  154. }
  155. #sub-header a {
  156.     text-align: center;
  157.     display: inline-block;
  158.     width: 100%;
  159. }
  160. .selected {
  161.     border-bottom: 3px solid cornflowerblue !important;
  162. }
  163. main {
  164.     width: 1000px;
  165.     margin: 30px auto;
  166. }
  167. aside {
  168.     width: 200px;
  169.     background-color: white;
  170. }
  171. #bill-gates {
  172.     padding: 20px;
  173.     border-bottom: 1px solid #EEE;
  174. }
  175. #bill-gates-image {
  176.     margin-bottom: 20px;
  177. }
  178. #bill-gates-image &gt; img {
  179.     margin: 0 auto;
  180.     display: block;
  181.     width: 100px;
  182.     height: 100px;
  183.     border-radius: 50%;
  184. }
  185. #bill-gates-bio {
  186.     text-align: center;
  187.     margin-bottom: 30px;
  188. }
  189. #bill-gates-bio &gt; h2 {
  190.     margin-bottom: 5px;
  191. }
  192. #bill-gates-bio &gt; p {
  193.     font-weight: lighter;
  194.     margin-bottom: 3px;
  195. }
  196. #bill-gates-bio &gt; p:last-child {
  197.     color: #CCC;
  198. }
  199. #bill-gates-follow-button {
  200.     text-align: center;
  201.     margin-bottom: 10px;
  202. }
  203. #bill-gates-follow-button &gt; a {
  204.     display: inline-block;
  205.     line-height: 20px;
  206.     padding: 10px 50px;
  207.     background-color: cornflowerblue;
  208.     color: white;
  209.     border-radius: 30px;
  210.     border: 1px solid transparent;
  211. }
  212. #bill-gates-follow-button &gt; a:hover {
  213.     background-color: rgb(70, 134, 253);
  214. }
  215. #bill-gates-connect-button {
  216.     text-align: center;
  217. }
  218. #bill-gates-connect-button &gt; a {
  219.     line-height: 20px;
  220.     display: inline-block;
  221.     padding: 10px 40px;
  222.     background-color: white;
  223.     color: cornflowerblue;
  224.     border: 1px solid cornflowerblue;
  225.     border-radius: 30px;
  226. }
  227. #bill-gates-connect-button &gt; a:hover {
  228.     background-color: #EEE;
  229. }
  230. #aside-middle {
  231.     overflow: hidden;
  232.     border-bottom: 1px solid #EEE;
  233.     height: 80px;
  234. }
  235. #connections {
  236.     text-align: center;
  237.     float: left;
  238.     width: 50%;
  239.     height: 100%;
  240.     border-right: 1px solid #EEE;
  241. }
  242. #followers {
  243.     text-align: center;
  244.     float: right;
  245.     width: 50%;
  246.     height: 100%;
  247. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4.     &lt;meta charset=&quot;UTF-8&quot;&gt;
  5.     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6.     &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
  7.     &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; type=&quot;text/css&quot;&gt;
  8.     &lt;title&gt;Bill Gates&lt;/title&gt;
  9. &lt;/head&gt;
  10. &lt;body&gt;
  11.     &lt;header&gt;
  12.         &lt;div id=&quot;logo&quot;&gt;
  13.             &lt;a href=&quot;#&quot;&gt;
  14.                 &lt;img src=&quot;./img/logo.png&quot; alt=&quot;LinkedIn logo&quot;&gt;
  15.             &lt;/a&gt;
  16.         &lt;/div&gt;&lt;!--
  17.      --&gt;&lt;div id=&quot;search&quot;&gt;
  18.             &lt;div id=&quot;search-box&quot;&gt;
  19.                 &lt;input type=&quot;search&quot; name=&quot;search&quot; placeholder=&quot;Search&quot;&gt;&lt;!--
  20.              --&gt;&lt;a href=&quot;#&quot;&gt;&#128269;&lt;/a&gt;
  21.             &lt;/div&gt;
  22.         &lt;/div&gt;&lt;!--
  23.         --&gt;&lt;div id=&quot;gnb&quot;&gt;
  24.             &lt;ul&gt;
  25.                 &lt;li&gt;
  26.                     &lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
  27.                 &lt;/li&gt;
  28.                 &lt;li&gt;
  29.                     &lt;a href=&quot;#&quot;&gt;Profile&lt;/a&gt;
  30.                 &lt;/li&gt;
  31.                 &lt;li&gt;
  32.                     &lt;a href=&quot;#&quot;&gt;Connections&lt;/a&gt;
  33.                 &lt;/li&gt;
  34.                 &lt;li&gt;
  35.                     &lt;a href=&quot;#&quot;&gt;Interest&lt;/a&gt;
  36.                 &lt;/li&gt;
  37.                 &lt;li class=&quot;premium&quot;&gt;
  38.                     &lt;a href=&quot;#&quot;&gt;Try Premium&lt;/a&gt;
  39.                 &lt;/li&gt;
  40.             &lt;/ul&gt;
  41.         &lt;/div&gt;&lt;!--
  42.         --&gt;&lt;div id=&quot;social-media-icons&quot;&gt;
  43.             &lt;ul&gt;
  44.                 &lt;li&gt;
  45.                     &lt;a href=&quot;#&quot;&gt;&#128483;&lt;/a&gt;
  46.                 &lt;/li&gt;
  47.                 &lt;li&gt;
  48.                     &lt;a href=&quot;#&quot;&gt;&#128276;&lt;/a&gt;
  49.                 &lt;/li&gt;
  50.                 &lt;li&gt;
  51.                     &lt;a href=&quot;#&quot;&gt;➕&lt;/a&gt;
  52.                 &lt;/li&gt;
  53.             &lt;/ul&gt;
  54.         &lt;/div&gt;&lt;!--
  55.         --&gt;&lt;div id=&quot;profile&quot;&gt;
  56.             &lt;a href=&quot;#&quot;&gt;
  57.                 &lt;img src=&quot;./img/avatar.jpg&quot; alt=&quot;Profile image&quot;&gt;
  58.             &lt;/a&gt;
  59.         &lt;/div&gt;
  60.     &lt;/header&gt;
  61.     &lt;div id=&quot;sub-header&quot;&gt;
  62.         &lt;ul&gt;
  63.             &lt;li class=&quot;selected&quot;&gt;
  64.                 &lt;a href=&quot;#&quot;&gt;Posts&lt;/a&gt;
  65.             &lt;/li&gt;&lt;li&gt;
  66.                 &lt;a href=&quot;#&quot;&gt;Background&lt;/a&gt;
  67.             &lt;/li&gt;&lt;li&gt;
  68.                 &lt;a href=&quot;#&quot;&gt;Recommendations&lt;/a&gt;
  69.             &lt;/li&gt;&lt;li&gt;
  70.                 &lt;a href=&quot;#&quot;&gt;Following&lt;/a&gt;
  71.             &lt;/li&gt;
  72.         &lt;/ul&gt;
  73.     &lt;/div&gt;
  74.     &lt;main&gt;
  75.         &lt;aside&gt;
  76.             &lt;div id=&quot;bill-gates&quot;&gt;
  77.                 &lt;div id=&quot;bill-gates-image&quot;&gt;
  78.                     &lt;img src=&quot;./img/bill-gates-avatar.png&quot; alt=&quot;Bill Gates Profile image&quot;&gt;
  79.                 &lt;/div&gt;
  80.                 &lt;div id=&quot;bill-gates-bio&quot;&gt;
  81.                     &lt;h2&gt;Bill Gates&lt;/h2&gt;
  82.                     &lt;p&gt;Microsoft Founder&lt;/p&gt;
  83.                     &lt;p&gt;Greater Seattle Area&lt;/p&gt;
  84.                 &lt;/div&gt;
  85.                 &lt;div id=&quot;bill-gates-follow-button&quot;&gt;
  86.                     &lt;a href=&quot;#&quot;&gt;Follow&lt;/a&gt;
  87.                 &lt;/div&gt;
  88.                 &lt;div id=&quot;bill-gates-connect-button&quot;&gt;
  89.                     &lt;a href=&quot;#&quot;&gt;Connect ↓&lt;/a&gt;
  90.                 &lt;/div&gt;
  91.             &lt;/div&gt;
  92.             &lt;div id=&quot;aside-middle&quot;&gt;
  93.                 &lt;div id=&quot;connections&quot;&gt;
  94.                     &lt;h3&gt;200&lt;/h3&gt;
  95.                     &lt;p&gt;connections&lt;/p&gt;
  96.                 &lt;/div&gt;
  97.                 &lt;div id=&quot;followers&quot;&gt;
  98.                     &lt;h3&gt;1.9M&lt;/h3&gt;
  99.                     &lt;p&gt;followers&lt;/p&gt;
  100.                 &lt;/div&gt;
  101.             &lt;/div&gt;
  102.         &lt;/aside&gt;
  103.     &lt;/main&gt;
  104. &lt;/body&gt;
  105. &lt;/html&gt;

<!-- end snippet -->

答案1

得分: 1

使用元素的width属性，它获取内容区域的宽度，不包括任何内边距、边框或外边距。

  1. .bg-tag {
  2.     font-family: Arial, sans-serif;
  3.     font-size: 14px;
  4.     text-decoration: none;
  5. }
  7. .bg-tag:focus {
  8.     padding-bottom: 2px;
  9.     border-bottom: 2px solid #000; #根据需要更改颜色
  10.     width: 100%;
  11. }
  1. <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 -->

  1. .bg-tag {
  2.     font-family: Arial, sans-serif;
  3.     font-size: 14px;
  4.     text-decoration: none;
  5. }
  7. .bg-tag:focus {
  8.     padding-bottom: 2px;
  9.     border-bottom: 2px solid #000; #change colour as you like
  10.     width: 100%;
  11. }

<!-- language: lang-html -->

  1. &lt;a href=&quot;#&quot; class=&quot;bg-tag&quot;&gt;Background&lt;/a&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2020年1月3日 13:30:40
  • 转载请务必保留本文链接：https://go.coder-hub.com/59573620.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定