Question

我需要将我的链接放在第二张照片（opus1）的右边，并在第一张照片（coverPhoto）下面。所以我真的需要将我的链接放在右侧。我尝试过多种不同的方式，我确信这是一个简单的解决方案，但我很难过。

    <!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8" />
    <title>Opus</title>
    <link href="opus.css" rel="stylesheet" type="text/css" />
    <div class="logo">
    <img class="coverPhoto" src="images/coverPhoto.jpg" alt="Cover Photo" height="300" width="1330">
    <img src="images/opus1.jpg" alt="Logo" height="500" width="600">
    </div>

 <body>

    <div class="nav">
        <ul>
            <li id="home"><a href="#"> Home</a></li>
            <li id="about"><a href="#"> About</a></li>
            <li id="more"><a href="#"> More</a></li>
        </ul>
    </div>

 </body>

 </head>

CSS

body {
    background-color: rgb(104, 0, 1);
}

#home {

}

#about {

}

#more {

}

li {
    display: inline-block;
}

ul {
    list-style-type: none;
    text-align: center;
}

Answer 1

1）将<div class="nav">嵌入<div class="logo">：

<div class="logo">

<img class="coverPhoto" src="images/coverPhoto.jpg" alt="Cover Photo" height="300" width="1330">
<img src="images/opus1.jpg" alt="Logo" height="500" width="600">

<div class="nav">
<ul>
<li id="home"><a href="#"> Home</a></li>
<li id="about"><a href="#"> About</a></li>
<li id="more"><a href="#"> More</a></li>
</ul>
</div>

</div>

2）同时显示图片和<div class="nav"> inline-block并向每个float应用左侧img, .nav { display: inline-block; float: left; }：

import math

from Tkinter import *

class Application(Frame):
    """A GUI application with three buttons"""

    def __init__(self, master):
        """Initialize the Frame"""
        Frame.__init__(self,master)
        self.grid()
        self.create_widgets()
        self.title = Label(self, text = "BMI index calculation")
        self.title.grid(row = 0, column = 0, columnspan = 2 , sticky =W)

    def create_widgets(self):
        """Create button, text and entry widgets"""
        self.name = Label(self, text = "What is your name?")
        self.name.grid(row = 1, column = 0, columnspan = 2 , sticky =W)
        self.name_io = Entry(self)
        self.name_io.grid(row = 1, column =2, sticky = W)

        self.age = Label(self, text = "How old are you?")
        self.age.grid(row = 2, column = 0, columnspan = 2 , sticky =W)
        self.age_io = Entry(self)
        self.age_io.grid(row = 2, column =2, sticky = W)

        self.height = Label(self, text = "How tall are you?")
        self.height.grid(row = 3, column = 0, columnspan = 2 , sticky =W)
        self.height_io = Entry(self)
        self.height_io.grid(row = 3, column =2, sticky = W)

        self.weight = Label(self, text = "How much do you weigh in kg?")
        self.weight.grid(row = 4, column = 0, columnspan = 2 , sticky =W)
        self.weight_io = Entry(self)
        self.weight_io.grid(row = 4, column =2, sticky = W)

        self.submit_button = Button(self, text = "Calculate", command = self.reveal)
        self.submit_button.grid(row = 5, column = 0, sticky = W)

        self.text = Text(self, width = 40, height = 5, wrap = WORD)
        self.text.grid(row = 6, column = 0, columnspan = 3, sticky = W)

        self.clear_button = Button(self, text = "Clear", command = self.clear_text)
        self.clear_button.grid(row = 7, column = 0, sticky = W)

    def reveal(self):
        """Display message based on the password typed in"""
        content_name = self.name_io.get()
        content_age = float(self.age_io.get())
        content_height = float(self.height_io.get())
        content_weight = float(self.weight_io.get())

        BMI = round((content_weight/(content_height/100)**2.),1)

        underBMI = 18.5
        NormalBMI = 24.9
        OverweightBMI = 29.9
        ObesityBMI = 30

        if BMI <= underBMI:
            message = content_name + ", " + "your BMI index is" + " " + str(BMI) + ", " + "you are underweight, so you need to eat!"
        elif (BMI > underBMI) and (BMI <= NormalBMI):
            message = content_name + ", " + "your BMI index is" + " " + str(BMI) + ", " + "your BMI is Normal"
        elif (BMI > NormalBMI) and (BMI <= OverweightBMI):
            message = content_name + ", " + "your BMI index is" + " " + str(BMI) + ", " + "you are Overweight - need to exercise!"
        elif (BMI > OverweightBMI):
            message = content_name + ", " + "your BMI index is" + " " + str(BMI) + ", " + "you are in Obesity"

        self.text.insert(0.0, message)



    def clear_text(self):
            self.name_io.delete(0, 'end')
            self.age_io.delete(0, 'end')
            self.height_io.delete(0, 'end')
            self.weight_io.delete(0, 'end')
#           self.text.delete(0, 'end')


root = Tk()
root.title("BMI Index")
root.geometry("600x350")
app = Application(root)
root.mainloop ()

ul li具体定位

1 个答案: