Question

enter image description here

第一张图片是当前图片，第二张图片是我想要的图片。然而似乎没有任何工作，任何人都可以帮助我吗？

的index.html

<!DOCTYPE html>
<html>
        <head>
                <title>speaker</title>
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link href="css/style.css" rel="stylesheet" media="screen">
        </head>
        <body>
                <div class="block container" id="container">
                        <center><img src="img/logo.png"></img></center>
                        <div class="separator"></div>
                        Name: <input class="block" id="name" type="text">
                        Post: <input class="block" id="post" type="text">
                        <a class="block" href="#" id="submit">Submit!</a>
                        <div class="separator"></div>
                        Followed tags:<input class="block" id="post" type="text"><br>
                        <span class="author">Separate tags with spaces, like; #tomatoes #cats #music
                        <div id="postbreak"></div>
                </div>

                <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
                <script src="js/script.js"></script>
        </body>
</html>

Answer 1

嘿，你可以给出一个内联样式并改变输入框的宽度

 Name: <input class="block" id="name" type="text" style="width:150px;">
                    Post: <input class="block" id="post" type="text" style="width:280px;">
                    <a class="block" href="#" id="submit">Submit!</a>
                    <div class="separator"></div>
                    Followed tags:<input class="block" id="post" type="text" style="width:480px;"><br>

Answer 2

最好的方法是：

从整个区域获取每个输入的百分比。方法如下： enter image description here

如何扩展输入以适应

2 个答案: