Question

关于如何在HTML / CSS UL菜单上实现某些样式的小问题。

我有一个标准的UL菜单，但有一些问题让我了解如何实现样式的某种外观。目前的UL菜单如下所示：

（HTML）

<ul id="nav">
    <li><a href="#">CONTACT US</a>
    </li>
    <li><a href="#">HOME</a>
    </li>
</ul>

（CSS）

#nav {
    list-style: none;
    margin-bottom: 10px;
    */ margin-top: -6px;
    position: relative;
    right: 286px;
    z-index: 9;
    height: 26px;
    padding: 4px 4px 4px 4px;
    font-weight: bold;
}
    #nav li {
    float: right;
    margin-right: 10px;
}

#nav a {
    display: block;
    padding: 5px;
    color: #444444;
    background: #fff;
    text-decoration: none;
    border: 1px solid grey;
}

#nav a:hover {
    color: #fff;
    background: #04B431;
}

我希望菜单按钮有一个小的1px边框，但在背景颜色开始之前会有一些大约3px的空白填充。

与此类似：

http://jsfiddle.net/6PY7z/

可以使用UL菜单方法完成吗？

感谢您的任何建议，我不是HTML / CSS的专家。

Answer 1

将margin添加到a代码并将边框移至li

#nav li
{
    float: right;
    margin-right: 10px;

    border: 1px solid grey;
}

    #nav a
    {
        display: block;
        padding: 5px;
        color: #444444;
        background: #ccc;
        text-decoration: none;
        margin:3px;    
    }

<强> DEMO

Answer 2

您可以使用以下样式来实现您的目标：

#nav li
{
    float: right;
    margin-right: 10px;
border: 1px solid grey; /*put original border here*/
}

#nav a
{
    display: block;
    padding: 5px;
    color: #444444;
    background: #d8d8d8; /*new background-color*/
    text-decoration: none;  
    border: 3px solid white; /*add white padding here*/
}

http://jsfiddle.net/WMQqt/4/

Answer 3

好

在html中

public class Turing extends Application {

ArrayList<Character> alph;
String name;
String initState;
String tapeEx;
private final ObservableList<State> states = FXCollections.observableArrayList(new State("state1"));
MainWindowController mainWindowController;
AddStateController addStateController;
EditStateController editStateController;
AddRuleController addRuleController;

//Initial-----------------------------------------------------------------------------------------------------------
public static void main(String[] args) {
    launch(args);
}

@Override
public void start(Stage primaryStage) throws Exception{
    FXMLLoader loader = new FXMLLoader(Turing.class.getResource("../windows/MainWindow.fxml"));
    AnchorPane pane = loader.load();
    primaryStage.setTitle("Turing Machine");

    mainWindowController = loader.getController();
    mainWindowController.setTuring(this);

    primaryStage.setScene(new Scene(pane, 900, 600));
    primaryStage.show();

    initTuring();
}

private void initTuring(){
    alph = new ArrayList<Character>();
    alph.add('#');
    name = "name";
    initState = "0";
    tapeEx = "";

    TableColumn statesCol = new TableColumn("state");
    statesCol.setCellValueFactory(new PropertyValueFactory<State, String>("name"));
    mainWindowController.getTableRules().getColumns().addAll(statesCol);

    TableColumn hashtagCol = new TableColumn("#");
    hashtagCol.setCellValueFactory(new PropertyValueFactory<State, String>("#"));
    mainWindowController.getTableRules().getColumns().addAll(hashtagCol);

    mainWindowController.getTableRules().setItems(states);
}

//Edit Table--------------------------------------------------------------------------------------------------------
public void setAlph(String alphString){
    ArrayList<Character> alphNew = new ArrayList<Character>();
    for (char c : alphString.toCharArray()) {
        alphNew.add(c);
    }
    alph = alphNew;
    alph.add('#');
    mainWindowController.getTableRules().getColumns().clear();
    TableColumn statesCol = new TableColumn("state");
    statesCol.setCellValueFactory(new PropertyValueFactory<State, String>("name"));
    mainWindowController.getTableRules().getColumns().addAll(statesCol);
    for(int i = 0; i < getAlph().size(); i++){
        TableColumn tc = new TableColumn("" + getAlph().get(i));
        tc.setCellValueFactory(new PropertyValueFactory<State, String>("" + getAlph().get(i)));
        mainWindowController.getTableRules().getColumns().addAll(tc);
    }
}

public void addStateBtn(){
    try {
        FXMLLoader loader = new FXMLLoader(Turing.class.getResource("../windows/AddStateWindow.fxml"));
        AnchorPane pane = loader.load();
        Stage stage = new Stage();
        stage.setTitle("Turing Machine - add state");

        addStateController = loader.getController();
        addStateController.setTuring(this);
        addStateController.setStage(stage);

        stage.setScene(new Scene(pane, 350, 150));
        stage.show();
    }
    catch (IOException e) {
        e.printStackTrace();
    }
}

public void addState(String state){
    states.add(new State(state));
    mainWindowController.getTableRules().setItems(states);
}

public void editStateBtn(){
    try {
        FXMLLoader loader = new FXMLLoader(Turing.class.getResource("../windows/EditStateWindow.fxml"));
        AnchorPane pane = loader.load();
        Stage stage = new Stage();
        stage.setTitle("Turing Machine - edit state");

        editStateController = loader.getController();
        editStateController.setTuring(this);
        editStateController.setStage(stage);

        stage.setScene(new Scene(pane, 350, 150));
        stage.show();
    }
    catch (IOException e) {
        e.printStackTrace();
    }
}

public void editState(String state){
    State item = (State) mainWindowController.getTableRules().getSelectionModel().getSelectedItem();
    if(item != null) {
        item.setName(state);
    }
}

public void addRuleBtn(String actualState){
    try {
        FXMLLoader loader = new FXMLLoader(Turing.class.getResource("../windows/AddRuleWindow.fxml"));
        AnchorPane pane = loader.load();
        Stage stage = new Stage();
        stage.setTitle("Turing Machine - add rule");

        addRuleController = loader.getController();
        addRuleController.setTuring(this);
        addRuleController.setStage(stage);
        addRuleController.setlState(actualState);
        addRuleController.getCbReadSymbol().setItems(FXCollections.observableArrayList(alph));
        addRuleController.getCbNextState().setItems(FXCollections.observableArrayList(states));
        addRuleController.getCbWriteSymbol().setItems(FXCollections.observableArrayList(alph));
        addRuleController.getCbReadSymbol().getSelectionModel().selectedIndexProperty().addListener(new ChangeListener<Number>() {
            @Override
            public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
                addRuleController.setReadSymbol(alph.get(newValue.intValue()));
            }
        });
        addRuleController.getCbWriteSymbol().getSelectionModel().selectedIndexProperty().addListener(new ChangeListener<Number>() {
            @Override
            public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
                addRuleController.setWriteSymbol(alph.get(newValue.intValue()));
            }
        });
        addRuleController.getCbNextState().getSelectionModel().selectedIndexProperty().addListener(new ChangeListener<Number>() {
            @Override
            public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
                addRuleController.setNextState(states.get(newValue.intValue()).getName());
            }
        });

        stage.setScene(new Scene(pane, 350, 375));
        stage.show();
    }
    catch (IOException e) {
        e.printStackTrace();
    }
}

public void addRule(String actState, char readSymbol, char writeSymbol, String nextState, AddRuleController.tape tapeMove){
    for (int i = 0; i < states.size(); i++) {
        if (states.get(i).getName().equals(actState)) {
            //mainWindowController.getTableRules().getItems().set(i, new State())
        }
    }
}

在CSS

<dl><div><dt>F</dt><dd>T</dd></div>
     <div><dt>F</dt><dd>T</dd></div>
     <div><dt>F</dt><dd>T</dd></div>
     <div><dt>F</dt><dd>T</dd></div>
</dl>

一些提示...

dt向左浮动，并且 dd向右浮动

HTML CSS UL菜单样式

3 个答案: