CSS - <a> Elements stacking over each other after resizing

Question

I have buttons with these properties:

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

Once the page resizes they don't seem to care about the padding and start stacking in each other.

有没有办法自动计算边界之间的适当边距？我不想设置一定数量的保证金来解决这个问题。

Answer 1

Flex属性不支持IE9，因此IE8更好地利用媒体查询。

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

          .yourSelector {

            display: block;
            width: 100%;

          }
    }

并插入margin:0.5%和box-sizing: border-box 。

完整代码：

＆＃13;

＆＃13;

.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%;
          }

}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

float: left; clear: both;

希望这会有所帮助。

Answer 3

你可以使用flexbox。无需媒体查询或额外代码。简化它。

＆＃13;

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

问题是，你的元素是内联的（显示：内联），所以你可以使用line-height属性制作填充，或者使它们成块，或者使用内联块来使用填充