Question

在下面的代码中，我试图将复选框放在右侧，但是当我使用Chrome切换到“自适应”视图以100像素的宽度时，然后单击该复选框以显示更长的说明。该复选框将被强制移出页面。

<!doctype html><head>                                                                                                                                                                                                                             
<meta name="viewport" content="width=device-width, initial-scale=1.0">          
<!-- <script src="//unpkg.com/mithril@next/mithril.min.js"></script> -->        
<script src="//unpkg.com/mithril@2.0.0-rc.4/mithril.min.js"></script>           
<style>                                                                         
table {                                                                         
  width: 90vw;                                                                  
  margin: 5vw;                                                                  
}                                                                               
</style>                                                                        
</head>                                                                         
<body>                                                                          
<script>                                                                        
var label1 = "This is label1"                                                   
var label2 = "This is label2 and it contains more data"                         
var Switch = {                                                                  
  value: true,                                                                  
  view: function(v) {                                                           
    console.log('v=',v)                                                         
    return m('tr', [                                                            
      m("td[width=70%]", v.state.value ? v.attrs.txt1 : v.attrs.txt2),          
      m("td[width=30%][align=right]", m('input[type=checkbox]', {               
        value: v.state.value,                                                   
        checked: v.state.value,                                                 
        onchange: function(e) {                                                 
          v.state.value = e.target.checked                                      
        }}))                                                                    
    ])                                                                          
  }                                                                             
}                                                                               
m.mount(document.body, {                                                        
  view: function() {                                                            
    return m('table[width=100%]',                                               
      m(Switch, {                                                               
        txt1:'This is label1',                                                  
        txt2:'This is label1 with more description',                            
      }),                                                                       
      m(Switch, {                                                               
        txt1:'This is label2',                                                  
        txt2:'This is label2 with more description',                            
      }),                                                                       
    )                                                                           
  }                                                                             
})                                                                              
</script>                                                                       
</body></html>

通过mithril.js将复选框右对齐而不进行水平滚动

0 个答案: