CSS旋转了文本和div放置问题

Question

我试图将旋转的文本放在另一个div旁边的div中，这是＆＃34;固定＆＃34;在浏览器窗口的右侧。我瞄准的结构是：

但是，我在旋转文本和确保定位方面遇到了并发症。这是我尝试过的：

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;
}

以下是我的尝试：

它越来越近，但我希望列表（红色边框）与主容器的顶部齐平，我也喜欢＆＃34;反馈＆＃34;占据它在列表左侧但仍在容器内的空间。

可能有一种更简单的方法，但我不确定。

非常感谢任何帮助！如果需要，我可以提供澄清：）

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;
}

Answer 2

试试这个并告诉我它是否足够接近。

<强> 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);
    z-index: 9999;
    float:left;
    margin-top:20px;
    margin-right:-20px;

}

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

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

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

<强> 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>
       </ul>
   </div>
</div>

Answer 3

以下是对css的一些修改。

http://jsfiddle.net/hv4neuf3/

#feedbackslider {
    background-color: #fff;
    position: fixed;
    right: 0;
    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: 90px;
    top: 85px;
    text-align: center;
    font-size: 20px;
    border: 1px solid #000;
}

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

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

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

#feedbackslider li{
    padding: 9px 5px;
}

Answer 4

Try This

更新CSS

.feedback-title {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    z-index: 9999;
    /*Add This CSS*/
    left: -54px; 
    margin-top: -10px; 
    position: absolute;
    text-align: center; 
    top: 50%; 
    width: 78px; 

}