Question

如何将此底部div设置为宽，因为它可能只是为了使文本不在新行？基本上我试图将Cookie通知设置为固定位置，在页面的中心，其子元素垂直对齐在同一行。

<div class="fixed">
  Lorem ispum dolor sita ametad asdf asdfLorem ispum dolor sita ametad asdf asdf sita ametad asdfispum dolor sita ametad 
  <a class="link" href="#">Link</a>
  <button class="btn">Button</button>
</div>

.fixed {
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
}

Answer 1

要实现这一点，您可以将内容包装在内部div中，就像我在下面的代码段中所做的那样。我也根据调整了CSS。

＆＃13;

http://stackoverflow.com/questions/43429112/how-to-set-auto-width-on-fixed-and-centred-element/43429243#

＆＃13;

.container {
  width: 950px;
  margin: auto;
}

.fixed {
  position: fixed;
  bottom: 0;
  background: #333;
  color: #fff;
  width: 100%;
}

.fixed .container {
  display: flex;
  align-items: center;
  padding: 7px;
  left: 50%;
  width: auto;
}

.fixed  .link {
  margin-left: 1em;
  color: #fff;
}
.fixed  .btn {
  margin-left: 2em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h1>
  Lorem ispum dolor sita ametad asdf asdfLorem ispum dolor sita ametad asdf asdf
</h1>

  <p>
    Lorem ispum dolor sita ametad asdf asdfLorem ispum dolor sita ametad asdf asdf
  </p>
</div>

<div class="fixed">
  <div class="container">
    Lorem ispum dolor sita ametad asdf asdfLorem ispum dolor sita ametad asdf asdf sita ametad asdfispum dolor sita ametad 
    <a class="link" href="#">Link</a>
    <button class="btn">Button</button>
  </div>
</div>

＆＃13;

Answer 2

只需从CSS更改一个属性即可。而你几乎就在那里。

.fixed {
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

而不是将width:auto;设置为width:100%，如果您想让fixed div中的内容居中，那么您可以使用{{1}根据您的测试进行设置}}。希望它有所帮助。

如何在固定和居中元素上设置自动宽度？

2 个答案: