Question

我正在尝试用六个按钮创建一个菜单，放在一个大的背景图像上。如何让链接文本留在按钮内？这是到目前为止的代码（我希望继续使用这个“列表方法”，因为我发现它比两个图像中的多个div语句更容易理解...）：

ul
{
    padding:0px;
    margin:0px;
    width:510px;
    float:left;
    list-style:none;
    background-image: url(http://www.returngis.net/wp-content/uploads/pics/demos/grass.jpg);
    z-index:150;
}

ul li
{
    width:50px;
    height:100px;
    padding:20px;
    float: left;
    display:inline-block;
    z-index:100;
}

<ul>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK1</li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK2</li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK3</li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK4</li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK5</li>
</ul>

Answer 1

您需要将文本链接包装在锚点中，因为我认为您无论如何都需要使它们可点击，然后再将它们向上移动＆＃34;使用负边距。像这样：

＆＃13;

ul
{
    padding:0px;
    margin:0px;
    width:510px;
    float:left;
    list-style:none;
    background-image: url(http://www.returngis.net/wp-content/uploads/pics/demos/grass.jpg);
    z-index:150;
}

ul li
{
    width:50px;
    height:100px;
    padding:20px;
    float: left;
    display:inline-block;
    z-index:100;
}

ul li a {
    display: block;
    margin-top: -64px;
}

＆＃13;

<ul>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" /><a>LINK1</a></li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" /><a>LINK2</a></li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" /><a>LINK3</a></li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" /><a>LINK4</a></li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" /><a>LINK5</a></li>
</ul>

＆＃13;

Answer 2

HTML

while True:
    bet = input("How much would you like to bet?")
    print ("You are betting €",bet,)

    win = int(bet) * int(2)

    print('Pick either 1 or 0')
    number = random.randint(0,1)
    guess = 0
    while number < 2:

        guess_number = int(input('Enter a number:'))


        if guess_number == number:
            print('Your guess is correct the number is',number)
            print("you have won €",win,) 
            break
        if guess_number >=2:
            print ("Number too high")
        else:
            print("you are wrong, you have lost €",bet,)
            break

    play_again = input("Play Again? y/n")
    if play_again.lower() == "y":
        continue
    else:
        break

CSS

<ul>
    <li>LINK1</li>
    <li>LINK2</li>
    <li>LINK3</li>
    <li>LINK4</li>
</ul>

JSFIDDLE：https://jsfiddle.net/d3Lw4hjq/

Answer 3

您可以absolute将img放在li中，并将padding上的li更改为margin，然后再使用display: inline-flex; justify-content: center; align-items: center; img将文字放在ul { padding:0px; margin:0px; width:510px; float:left; list-style:none; background-image: url(http://www.returngis.net/wp-content/uploads/pics/demos/grass.jpg); z-index:150; } ul li { width:50px; height:100px; margin:20px; z-index:100; position: relative; float: left; display: inline-flex; justify-content: center; align-items: center; } ul li img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; }

上

<ul>
    <li><img src="http://via.placeholder.com/350x150"/>LINK1</li>
    <li><img src="http://via.placeholder.com/350x150"/>LINK2</li>
    <li><img src="http://via.placeholder.com/350x150"/>LINK3</li>
    <li><img src="http://via.placeholder.com/350x150"/>LINK4</li>
    <li><img src="http://via.placeholder.com/350x150"/>LINK5</li>
</ul>

private class receivingData extends AsyncTask<String, Void, String> {

        private volatile boolean exit = false;
        DataInputStream in;

        byte[] fullBuffer = new byte[7];
        byte[] buffer = new byte[100];  // buffer store for the stream
        int bytes; // bytes returned from read()
        int bytesCount = 0;

        @Override
        protected String doInBackground(String... params) {
            try {
                if (socket.isConnected()) {
                    in = new DataInputStream(socket.getInputStream());
                    //Log.d(TAG,"In async receive data run, connected");
                }
            }catch(Exception e){
                Log.d(TAG, "in async receiveData - run exception - " + e.toString());
            }
            while(!exit){
                try {
                    bytes = in.read(buffer);        // Get number of bytes and message in "buffer"
                    System.arraycopy(buffer,0,fullBuffer,bytesCount,bytes);
                    bytesCount = bytesCount + bytes;
                    if(bytesCount >= 7) {
                        hdt.obtainMessage(RECEIVED_MESSAGE, bytesCount, -1, fullBuffer).sendToTarget();     // Send to message queue Handler
                        Log.d("DTA Read - ", "Message sent");
                        bytesCount = 0;
                        Log.d("DTA Read - ", "bytesCount re-set");
                    }
                }catch(Exception e){
                    Log.d(TAG, "Read Error - " + e.toString());
                }
            }
            return "Executed";
        }

        @Override
        protected void onPostExecute(String result) {
        }

        @Override
        protected void onPreExecute() {}

        @Override
        protected void onProgressUpdate(Void... values) {}
    }

Answer 4

您可以将图片设置为li的背景，如下所示：

<ul>
    <li>LINK1</li>
    <li>LINK2</li>
    <li>LINK3</li>
    <li>LINK4</li>
    <li>LINK5</li>
</ul>

对于css：

li { background-image: url('http://via.placeholder.com/350x150'); }

或者你绝对定位图像，如下所示：

ul li
{
    position: relative;
}

ul li img {
  position: absolute;
  z-index: -1;
}

在这里小提琴：https://jsfiddle.net/v78501mn/

如果你有＆＃34;显示：inline-block＆＃34;在你的李，＆＃34;浮动：左＆＃34;没有必要。

Answer 5

哦！我只是没有意识到你能够通过添加额外的css代码来自定义img-tag的行为。真的很酷！我还是新手，但我完全理解所有这些解决方案！谢谢！

将链接放在菜单按钮内

5 个答案: