如何显示论坛链接以及在我的论坛中发布它的用户?

时间:2017-01-05 15:47:19

标签: html wordpress css3

我想显示一个论坛链接,在右侧还应该在论坛中显示具有最新帖子或帖子的用户。 显然这就是我所做的。

代码HTML:

<div class="container">
  <div class="toggle"></div>
  <h2>INFORMACJE</h2>
  <div class="city">
    <ul>
      <li><a href="http://127.0.0.1:81/projekt/forums/forum/ogloszenia-i-nowosci//">ogłoszenia i nowości</a></li>
      <li><a href="http://127.0.0.1:81/projekt/forums/forum/feedback/">Feedback</a></li>

    </ul>
  </div>
</div>

CODE CSS:

.toggle {
display:inline-block;
height:48px;
width:48px; 
float: right;
 background:url("http://cdn2.iconfinder.com/data/icons/onebit/PNG/onebit_32.png"); 


}

.toggle.expanded{
background:url("http://icons.iconarchive.com/icons/pixelmixer/basic/48/plus-icon.png");

}

h2 {
    color: white;
    background-color: rgb(36, 37, 38);
    padding: 11px 10px 11px 10px;
    margin: 0;
    border-width: 0;
    border-radius: 4px;
    border: 1px solid rgb(70, 70, 70);
    margin-bottom: 10px;
}

这是我得到的:(

enter image description here

以下是最终结果的外观。 enter image description here

我怎样才能实现这一目标?我是新手请帮忙

在jsfiddle中检查:https://jsfiddle.net/kh3u0q0r/

1 个答案:

答案 0 :(得分:0)

这就是你要找的???

.toggle {
  display: inline-block;
  height: 48px;
  width: 48px;
  float: right;
  background: url("http://cdn2.iconfinder.com/data/icons/onebit/PNG/onebit_32.png");
}
.first {
  float: left;
}
.second {
  float: right;
}
.toggle.expanded {
  background: url("http://icons.iconarchive.com/icons/pixelmixer/basic/48/plus-icon.png");
}
h2 {
  color: white;
  background-color: rgb(36, 37, 38);
  padding: 11px 10px 11px 10px;
  margin: 0;
  border-width: 0;
  border-radius: 4px;
  border: 1px solid rgb(70, 70, 70);
  margin-bottom: 10px;
}
<div class="container">
  <div class="toggle"></div>
  <h2>INFORMACJE</h2>

  <div class="city">
    <ul>
      <li class="first"><a href="http://127.0.0.1:81/projekt/forums/forum/ogloszenia-i-nowosci//">ogłoszenia i nowości</a>
      </li>
      <li class="second">
        <a href="http://127.0.0.1:81/projekt/forums/forum/feedback/">Feedback</a>
      </li>

    </ul>
  </div>
</div>