为什么a标签不能设置宽度？

为什么a标签不能设置宽度？在a标签上用css设置宽度没有任何反应，到底是为什么那？

因为行内元素都是不能设置宽高的，a标签也是行内元素，所以也不能设置宽度，如果想设置宽度，必须把行内元素转换为block或者inline-block，
转换为块block的话，元素会独占一行，有可能会改变你的布局，

如果想继续保持元素在一样上面，可以设置行内块inline-block，设置为行内块后可能会出现该元素和邻近元素不在一个水平线上，解决方法就是设置vertical-align: middle; 或者 vertical-align: top 试试，其他的属性也可以试试。

因为行内元素都是不能设置宽高的，a标签也是行内元素，所以也不能设置宽度，如果想设置宽度，必须把行内元素转换为block或者inline-block，

转换为块block的话，元素会独占一行，有可能会改变你的布局，

如果想继续保持元素在一样上面，可以设置行内块inline-block，设置为行内块后可能会出现该元素和邻近元素不在一个水平线上，解决方法就是设置vertical-align: middle; 或者 vertical-align: top 试试，其他的属性也可以试试。
常见的块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
常见的行内元素：span, strong, em, br, img , input, label, select, textarea, cite, a

原文地址：https://www.cnblogs.com/dongdong415/p/10807478.html

时间： 2024-09-29 22:22:20

为什么a标签不能设置宽度？的相关文章

关于网站开发中div标签中设置宽度后其中文本溢出的原因和解决方法

一.问题产生的原因 当我们为div标签声明了宽度,但是仍然会出现文本越界的情况,不知道大家有没有发现,只有文本内容为单词或者纯数字 的时候才会出现这种情况为此我特意测试了两种情况,结果如下: ①当文本内容为纯数字或者字母: ②当文本内容为汉字: 所以我们可以得出结论:浏览器在解析我们页面的时候,给这一串数字当成一个词了,这样就不会自动切断字符串而进行换行. 二.解决方法 ①word-wrap:break-word (例如div宽200px,它的内容就会到200px自动换行) ②word-brea

不设置宽度的盒子模型水平居中问题。

经常会遇到这个问题:在最外层盒子模型不方便设置宽度的情况下,缩小放大窗口时,希望盒子模型也能继续水平居中.特别是在做移动端页面的时候,如果给外层盒子模型设置宽高,会多出很多代码. 例子: 图中(三个固定宽高的黄色背景盒子)被(不固定宽高的红色背景盒子box)所包裹.div标签另有作用,后面会讲到. 1 <div> 2 <ul id="box"> 3 <li>1</li> 4 <li>2</li> 5 <li&

HTML中的&lt;select&gt;标签如何设置默认选中的选项

方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  "sel" > < option  value = "1" >1</ option > < option  value = "2"  selected = "selected" >2</ opt

input标签不能设置height

首先input是内联标签(inline) inline元素设置width.height属性无效 可以通过设置display:inline-block ,则内联标签可以设置width和height,但是设置了如果还无效,那么 浏览器不同解决办法不同: <style> input[type=button] { appearance:button; -moz-appearance:button; /* Firefox */ -webkit-appearance:button; /* Safari 和

进行手持设备wince开发中DataGrid的样式设置(宽度)

private void SelectGoodsForm_Load(object sender, EventArgs e) { //定义 DataGrid样式 DataGridTableStyle dataGridStyle = null; dataGridStyle = new DataGridTableStyle(); this.goodsGrid.DataSource = createDataTable(); //清楚之前的DataGrid样式 this.goodsGrid.TableSt

React设置宽度的坑

[React设置宽度的坑] 我们知道通过ref可以获取DOM元素,通过style属性可以给此DOM元素添加样式. 但下面两行的赋值是无效的: this.HomeRootDiv.style.width=window.screen.width this.HomeRootDiv.style.height=window.screen.height 因为style中的width.height是有单位的,必须加上px才是有效的赋值.所以要改成下面这样 this.HomeRootDiv.style.width

SharePoint 2010 设置宽度1024px

SharePoint 2010 设置宽度1024px 在模板页中找到 s4-workspace,设置class=”s4-nosetwidth“,然后再设置宽度为1024px:如果要居中,设置style=“margin:0 auto” 这样也会有一个问题:滚动条的问题.这样那个滚动条就会在中间. 可以这样:设置s4-workspace的overflow:visible ; 这样设置完之后应该是没有问题了,但是,就怕但是,页面就没有滚动条了,超出屏幕的范围就看不到了. 可以这样:设置body的样式,

&lt;span&gt; 无法设置宽度的完美解决方案！

在默认的情况下,利用css样式对span进行宽度设定是无效,但有时为了某种排版的要求,需要对span进行宽度设定,那么如何在html中利用css样式设定span的宽度? 思路:这看上去是个很简单的问题,似乎用style中的width属性就可以. 然而通过试验以后发现,无论是在Firefox还是IE中都无效. 在css2的标准中,查阅关于width的定义,我们可以发现,原来css中的width属性并不总是有效的,如果对象是inline对象,width属性就会被忽略.Firefox和IE都遵循了这个

如何给超链接设置宽度和高度

1.利用display:block属性 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <meta charset="utf-8" /> 5: <title>a设置宽度和高度</title> 6: <style> 7: .abc a{ 8: display:block; 9: width:130px; 10: height:30px; 11: border:1px s