CSS - <a>元调整

后堆放在对方我有按钮具有这些属性：CSS - <a>元调整

background: #c6cdf2; 
border: 1px solid #8896e4; 
border-radius: 3px; 
padding: 6px 10px 3px 10px;

一旦页面重新调整他们似乎并不关心填充，并开始相互叠加。

有没有一种方法来计算automaticaly边界之间的适当距离呢？我不想设置一个固定的保证金数量来遇到这个问题。

来源

2017-05-06 sarrrrek

Flex属性仅支持IE10和IE11，因此可以更好地使用媒体查询。请参阅我的文章。 – Ehsan

您可以使用flexbox。不需要媒体查询或额外的代码。简化它。

div { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
a { 
 
    background: #c6cdf2; 
 
    border: 1px solid #8896e4; 
 
    border-radius: 3px; 
 
    padding: 6px 10px 3px; 
 
    margin: 10px /* whatever you want here */ 
 
}

<div> 
 
    <a href="#">long long long text</a> 
 
    <a href="#">long long text demo</a> 
 
    <a href="#">short text</a> 
 
</div>

来源

2017-05-06 02:41:36 dippas

Flex属性仅支持IE10和IE11。 – Ehsan

@ehsan所以？ EDGE已经在版本15中 – dippas

Flex属性不支持IE9，IE8等更好地使用媒体查询。

@media screen and (max-width: 380px) { 

      .yourSelector { 

      display: block; 
      width: 100%; 

      } 
    }

和接入margin:0.5%和box-sizing: border-box。

全码：

.b { 
 

 
    background: #c6cdf2; 
 
    border: 1px solid #8896e4; 
 
    border-radius: 3px; 
 
    padding: 6px 10px 3px 10px; 
 
    margin: 0.5%; 
 
    box-sizing: border-box; 
 
} 
 

 
@media screen and (max-width: 380px) { 
 

 
     .b { 
 
      
 
      display: block; 
 
      width: 100%; 
 
      } 
 

 
}

<a href="#" class="b">Button1 </button> 
 
<a href="#" class="b">Button2 </button> 
 
<a href="#" class="b">Button3 </button> 
 
<a href="#" class="b">Button4 </button> 
 
<a href="#" class="b">Button5 </button>

来源

2017-05-06 02:31:51 Ehsan

您可以尝试将两个样式属性：

float: left; clear: both;

希望这将有助于。

来源

2017-05-06 02:32:32 Priya

的问题是，您的元素是内联（显示：内联），所以你可以用line-height属性垫衬，或使他们的块，或内联块使用垫衬

来源

2017-05-06 04:18:10 user14511

CSS - <a>元调整

回答

相关问题