html - CSS 旋转文本和 div 放置问题

Question

我试图将旋转的文本放置在另一个 div 旁边的 div 中，该 div “固定”在浏览器窗口的右侧。我的目标结构是这样的:

但是，我在旋转文本和正确定位方面遇到了麻烦。这是我尝试过的:

HTML 标记

<div id='feedbackslider'>
   <div class='feedback-title'>
      <i class='glyphicon glyphicon-bullhorn mr10'></i> Feedback
   </div>
   <div class='feedback-list'>
       <ul>
          <li>Ask a Question</li>
          <li>Give Praise</li>
          <li>Share an Idea</li>
          <li>Report a Problem</li>
       </u
   </div>
</div>

CSS:

#feedbackslider {
    background-color: #fff;
    position: fixed;
    right: -25px;
    padding: 0;
    top: 50%;
    z-index: 9999;
}

.feedback-title {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    position: relative;
    z-index: 9999;
    right: 75px;

}

#feedbackslider:hover .feedback-title {
     /*color: #fff;*/
}

#feedbackslider .feedback-list {
    border: solid 1px red;
    float: right;
}

#feedbackslider .feedback-list ul {
    width: 150px;
    padding: 0;
    list-style: none;
    margin: 0;
}

这是我的尝试:

它已经很接近了，但我希望列表(红色边框)与主容器的顶部齐平，并且我还希望“反馈”占据列表左侧的自己的空间，但仍在列表内容器。

可能有一种更简单的方法可以做到这一点，但我不确定。

任何帮助将不胜感激!如果需要，我可以提供说明:)

Answer 1

如果即使内容增长，您也想将标题放在中间，则可以 try this

HTML

<div id='feedbackslider'>
   <div class='feedback-title'>
     <span> <!--Added this span-->
        <i class='glyphicon glyphicon-bullhorn mr10'></i> Feedback 
     </span>

   </div>
   <div class='feedback-list'>
       <ul>
          <li>Ask a Question</li>
          <li>Give Praise</li>
          <li>Share an Idea</li>
          <li>Report a Problem</li>
       </u
   </div>
</div>

CSS

#feedbackslider {
    background-color: #fff;
    padding: 0;
    position: fixed;
    right: -25px;
    top: 50%;
    z-index: 9999;
  display: table; /*Added this*/
  border-spacing: 10px; /*change this spacing according to your need*/
}
/*added this css for title*/
.feedback-title {
  display: table-cell;
  width: 20px;
  margin-right: 5px;
  height: 100%;
  border: 1px solid #ccc
}
/*added this css for inner span*/
.feedback-title span {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
     left: -19px;
    margin-top: -10px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 78px;
    z-index: 9999;


}

#feedbackslider:hover .feedback-title {
     /*color: #fff;*/
}

#feedbackslider .feedback-list {
    border: solid 1px red;
    display: table-cell; /Added this/
}

#feedbackslider .feedback-list ul {
    width: 150px;
    padding: 0;
    list-style: none;
    margin: 0;
}