Question

我的网站上有很多头条新闻。如果有人点击标题，则应显示标题（左侧）之前的按钮（例如10px）。

问题是标题应始终居中 - 如果显示或不显示按钮。如果显示/隐藏按钮，标题不应改变其位置。

<html>
  <head>
    <style type="text/css">
      .headline {
        background-color: grey;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        padding: 5px;
        width: 70%;
      }
    </style>
  </head>

  <body>
    <div class="headline">Headline 1</div>
    <div class="headline">Headline 2</div>
  </body>
</html>

小提琴：https://jsfiddle.net/ct11gp3v/

我已经尝试了很多绝对位置......但没有成功。

提前致谢！

Answer 1

只需将按钮固定在标题内，并将其置于绝对位置：

＆＃13;

.headline {
    background-color: grey;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    padding: 5px;
    width: 70%;
    position: relative; /* This will allow the button to be
                           displayed relative to the headline */
}

.headline div{
    position: absolute;
    top: 5px;
    right: 100%;
    margin-right: 10px;
}

＆＃13;

<div class="headline">Headline 1 <div>Test</div></div>
<div class="headline">Headline 2</div>

＆＃13;

Answer 2

也许这会有所帮助。在这种情况下，您需要知道按钮的宽度。

  .headline {
    position: relative;
    background-color: grey;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    padding: 5px;
    width: 50%;
  }
  .headline button{
    position: absolute;
    background-color: lightblue;
    width: 100px;
    margin: 0 0 0 -120px;
    display: none;
    padding: 0px;
  }
  .headline:hover button{
    display: inline-block;
  }

 

<div class="headline"><button>A button</button>Headline 1</div>
<div class="headline"><button>A button</button>Headline 2</div>

请不要写非语义代码。使用h1-h7作为标题而不是类名。

Answer 3

给出按钮位置：绝对

button {
    position: absolute;
}

Here's a fiddle

在居中的div之前的div

3 个答案: