<div> <p> </p>导致布局问题

时间:2018-01-16 12:19:18

标签: javascript html translation google-translate

我正在尝试使用我在网上找到的这种方法翻译<p></p>内容:

<html> 
    <head> 
    <title>My Page</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head> 
<body class="translate"> 
    <div>Тестирование</p>
    <div class="translate_control" lang="en"></div>

    <script>
    function googleSectionalElementInit() {
      new google.translate.SectionalElement({
        sectionalNodeClassName: 'translate',
        controlNodeClassName: 'translate_control',
        background: '#f4fa58'
      }, 'google_sectional_element');
    }
    </script>
    <script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>

</body>
</html>

Fiddle

正如你可以看到的那样,可翻译的文本被包含在<div></p>中,这是我以前从未遇到过的,它弄乱了只有<p></p>或{{1}不会发生的布局}}

有人可以解释发生了什么,有没有解决这个问题?

1 个答案:

答案 0 :(得分:1)

尝试这种方式,<div></p>完全错误:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head> 
<body class="translate"> 
    <p>Тестирование</p>
    <div class="translate_control" lang="en"></div>
</body>

<script>
    function googleSectionalElementInit() {
      new google.translate.SectionalElement({
        sectionalNodeClassName: 'translate',
        controlNodeClassName: 'translate_control',
        background: '#f4fa58'
      }, 'google_sectional_element');
    }
</script>    
<script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>
</html>