Question

我在页面底部有分页，我想保留＆＃34; Page 1 of 2＆＃34;以...为中心，只有＃34;老年人＆＃34;和＆＃34;更新＆＃34;即使只有两个按钮中的一个存在，按钮也会包裹它。

这是我目前所拥有的：

＆＃13;

.wrapper {
  background-color: #aaa;
  width: 540px;
  margin: 0 auto;
  text-align: center;
}
.links {} .page {}

＆＃13;

<div class="wrapper">
  <a href="#" class="links">Older</a>
  <span class="page">Page 1 of 2</span>
</div>

＆＃13;

我如何保持＆＃34;第1页，共2页＆＃34;以div为中心，只是把'＃34;老年人＆＃34;或者＆＃34;更新＆＃34;链接在span的左侧或右侧附近？

Answer 1

.wrapper {
  background-color: #aaa;
  width: 100%;
  margin: 0 auto;
}
.items {
    position: relative;
    text-align: center;
}
.item {
    margin: 0 5px;
}
.always-left, .always-right {
    position: absolute;
    top: 0;
}

.always-left {
    left: 0;
}

.always-right {
    right: 0;
}

<div class="wrapper items">
  <a class="item always-left" href="#">Older</a>
  <div class="item">Page 1 of 2</div>
  <a class="item always-right" href="#">Older</a>
</div>

Answer 2

＆＃13;

void yourMethod(@Body RequestObject object, Callback<ResponseType> callback);

＆＃13;

.wrapper {
  width: 540px;
  background: #CCC;
  margin: 0 auto;
  text-align: center;
}
.links {
  float: left;
}
.newer {
  float: right;
}

＆＃13;

为了让链接粘在左侧（和右侧），您需要使用float从正常流中删除链接。

View it here

CSS

<div class="wrapper">
  <a href="#" class="links older">Older</a>
  <span class="page">Page 1 of 2</span>
  <a href="#" class="links newer">Newer</a>
</div>

HTML

.links{
  float:left;
}
.newer{
  float:right;
}

Answer 3

这是一种方法

＆＃13;

<div id='#moreInfo>contents here</div>

<script>
   $(document).ready(function(){
          $('html, body').animate({
             scrollTop: $("#moreInfo").offset().top
           }, 1000);
   })
</script>

＆＃13;

.wrapper {
    background-color: #aaa;
    width: 540px;
    position: relative;
}
.links {
    position: absolute;
    /* half width of the container - width of "Page 1 of 2" - 10px margin */
    left: calc(50% - 73px - 10px);
}
.page {
    display: table;
    margin: auto;
}

＆＃13;

如何将链接与其旁边的其他文本对齐？

3 个答案: