Question

我刚开始学习HTML / CSS / JS 2天前和今天我做了一个供个人使用的小工具。我是在1980 x 1080分辨率的计算机上制作的，但在其他分辨率上看起来并不合适。

我所做的是一个小工具，它基本上允许我将乐队和乐队的类型放入输入字段然后将其添加到列表中。除了我在列表中添加一个乐队时，一切看起来都不错。应该进入边界的文本一直到屏幕右侧，边框变成一个小方块。

我有另一个问题，我可能会在这里问：我想添加一个函数，我可以单击我添加到列表中的一个波段，然后突出显示我单击的波段，并通过单击删除按钮将其删除。但我不知道从哪里开始。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel='stylesheet' href='stylesheet.css'/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="script.js"></script>
    </head>
    <body>
        <h2>Bands I Like</h2>
        <form name="checkListForm">
            <input type="text" id = "Item" name="checkListItem"/>
        </form>
        <div id="button">Add!</div>
        <br/>
        <div class="list"></div>

        <ol class = "Header">
            <li>Band // Genre</li>
        </ol>
        <br/>
        <ol class ="Bands">

        </ol>


    </body>
</html>

的CSS：

.Header {
    list-style-type: none;
    position: relative;
}

.Header {
    background: black;
    border-radius: 5px;
    border: 1px solid white;
    margin: 4px 20px;
    padding:0.4em;
    font-size: 1em;
    height: 16px;
    font-family: Verdana, Arial, Sans-Serif;
    color:white;
    text-align:center;
}

.Bands li {
    list-style-type: none;
    position: relative;


}

.Bands li {
    background: #eeeeee;
    border-radius: 5px;
    border: 1px solid black;
    margin: 4px 750px;
    padding:0.4em;
    font-size: 1em;
    height: 16px;
    font-family: Verdana, Arial, Sans-Serif;
    //text-align:center;
}



h2 {
    font-family:arial;
    color:white;
}

form {
    display: inline-block;
}

#button{
    display: inline-block;
    height:20px;
    width:70px;
    background-color:grey;
    font-family:arial;
    font-weight:bold;
    color:#ffffff;
    border-radius: 5px;
    text-align:center;
    margin-top:2px;
}

.list {
    font-family:garamond;
    color:#cc0000;
}

body {
    background-image: url("http://fc04.deviantart.net/fs71/f/2011/027/d/e/sphere_of_doom_by_crackoala-d386se9.png");

JS / jQuery的：

$(document).ready(function(){
$("#button").click(function(){
$('.Bands').append('<li>'+$('#Item').val()+'</li>');
    $('#Item').val("");
});
$('.Bands').sortable();
});

您可以在此处找到我的所有代码： http://jsfiddle.net/mLkcr501/

任何帮助将不胜感激！

Answer 1

CSS中的这一行是向右碰撞。

margin: 4px 750px;

然后只需要将链接浮动，这样边框就会覆盖它们：

.bands{
    float:left;
}

http://jsfiddle.net/mLkcr501/1/

-Cheers，

Answer 2

您必须使用媒体查询来调整不同分辨率的大小。

@media (max-width: 640px){
    'here contains the class or ids'{width:100%; float: left;}
    .greyBox2{display:none;}
    .text{width: 100%; text-align: left; font-size: 17px;}
}

我的网站在不同的分辨率上看起来不正确

2 个答案: