Question

我是网页开发的新手，试图实现两个菜单，一个是旁边的，看起来像镜子。

关键是我找到了使用以下css水平翻转的方法，

body {
 -webkit-transform:rotateY(180deg);
 -moz-transform:rotateY(180deg);
 -o-transform:rotateY(180deg);
 -ms-transform:rotateY(180deg);
}

Html是，

<body>
   <h1>Vertical Menu</h1>
   <div class="vertical-menu">
   <a href="#" class="active">Home</a>
   <a href="#">Link 1</a>
   <a href="#">Link 2</a>
   <a href="#">Link 3</a>
   <a href="#">Link 4</a>
   </div>
</body>

但文字也是倒置的。我不能做的是反转菜单，让文本保持原样。

完整的CSS文件是，

.vertical-menu {
 width: 200px;
}

.vertical-menu a {
 background-color: #eee;
 color: black;
 display: block;
 padding: 12px;
 text-decoration: none;
}

.vertical-menu a:hover {
 background-color: #ccc;
}

.vertical-menu a.active {
 background-color: #4CAF50;
 color: white;
}

检查了类似问题的解决方案，但没有帮助我。

Answer 1

您可以使用text-align属性

将

.reflected{
  text-align:right;
}

类简单地用于镜像菜单

.vertical-menu {
 width: 200px;
}

.reflected{
  text-align:right;
}

.holder{
  float:left;
  padding:2px;
}

.vertical-menu a {
 background-color: #eee;
 color: black;
 display: block;
 padding: 12px;
 text-decoration: none;
}

.vertical-menu a:hover {
 background-color: #ccc;
}

.vertical-menu a.active {
 background-color: #4CAF50;
 color: white;
}

＆＃13;

<body>
   <div class="holder">
   <h1>Vertical Menu</h1>
   <div class="vertical-menu">
   <a href="#" class="active">Home</a>
   <a href="#">Link 1</a>
   <a href="#">Link 2</a>
   <a href="#">Link 3</a>
   <a href="#">Link 4</a>
   </div>
   </div>
   
   <div class="holder">
   <h1>Vertical Menu</h1>
   <div class="vertical-menu reflected">
   <a href="#" class="active">Home</a>
   <a href="#">Link 1</a>
   <a href="#">Link 2</a>
   <a href="#">Link 3</a>
   <a href="#">Link 4</a>
   </div>
   </div>
   
</body>

＆＃13;

var AUTH_TOKEN=$('meta[name="csrf-token"]').attr('content');

      Dropzone.autoDiscover = false;
      var myDropzone = new Dropzone("div#mydropzone",{
          url: "<%= professionnel_diagnostiqueur_diagnostiqueurdevi_diagnostiqueurreponses_path(@devi.diagnostiqueur.professionnel.id,@devi.diagnostiqueur.id,@devi.id) %>",
          autoProcessQueue: false,
          uploadMultiple: true,
          addRemoveLinks:true,
          parallelUploads:10,
          maxFilesize: 15,
          params:{
              'authenticity_token':  AUTH_TOKEN
          },
          successmultiple: function(data,response){
              $('#msgBoard').append(response.message).addClass("alert alert-success");
              $('#msgBoard').delay(2000).fadeOut();
              $('#fileslist').val(response.filesList);
              $('#photographedit').off('submit').submit();
          }
      });

      $('#photographedit').submit(function(e){
          if(myDropzone.getQueuedFiles().length > 0){
              e.preventDefault();
              myDropzone.processQueue();
          }
      });

＆＃13;

水平翻转html网页而不是文字

1 个答案: