Question

我希望在水平列表中放置3个方框。我使用的代码是

<div class="rowtitle">
    <ul>
        <li style="display: inline;">
            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername"><? echo $first_block_text; ?></div>
                </a>
            </div>
        </li>   
        <li style="display: inline;">
            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername"><? echo $second_block_text; ?></div>
                </a>
            </div>
        </li>   
        <li style="display: inline;">
            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername"><? echo $third_block_text; ?></div>
                </a>
            </div>
        </li>   
    </ul>
</div>

我使用的是

.rowtitle ul 
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
#rowtitle ul li 
    { 
        display: inline; 
    }

#rowtitle ul li a 
    { 
        text-decoration: none; 
    }

但是这些框没有排列在水平列表中。任何人都可以告诉我该怎么做

Answer 1

#rowtitle ul li 
    { 
        display: inline-block; 
    }

Answer 2

您正在使用ID显示<li>样式，但在html和第1行css中使用了类。尝试更改它： Demo

CSS：

#rowtitle ul 
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
#rowtitle ul li 
    { 
    display: block; 
    float:left; /* instead you can use  display: inline-block;    */
    background-color:#ccc; margin-right:2px;
    }

#rowtitle ul li a 
    { 
        text-decoration: none; 
    }

HTML：

<div id="rowtitle">
    <ul>
        <li >
            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername">1</div>
                </a>
            </div>
        </li>   
        <li >
            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername">2</div>
                </a>
            </div>
        </li>   
        <li >
            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername">3</div>
                </a>
            </div>
        </li>   
    </ul>
</div>

Answer 3

请勿使用display: inline。请改用float: left。

Answer 4

问题是您在display: block; float: left;中使用了块级元素。一种解决方案是使用li：

＆＃13;

float: left

＆＃13;

.rowtitle ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#rowtitle ul li {
  display: inline;
}
#rowtitle ul li a {
  text-decoration: none;
}
.wrappername {
  float: left;
  padding: 0 10px 0 10px;
}
div.wrappername:hover {
  text-decoration: underline;
}

＆＃13;

Answer 5

将float属性包括在内，将其值包含在左侧

$id = $_POST['id'];

$ligacao = mysqli_connect("localhost", "root", "", "mydatabase");
if (mysqli_connect_errno()) {
    echo "Can't connect to database: " . mysqli_connect_error();
}

$sql = "delete from events WHERE id= '$id'";
$resultado = mysqli_query($ligacao, $sql);
mysqli_close($ligacao);

Answer 6

删除ul li尽可能使用div 这是HTML代码

<div class="rowtitle">

            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername">box1</div>
                </a>
            </div>

            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername">box2</div>
                </a>
            </div>

            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername">box3</div>
                </a>
            </div>

</div>

这里是css

.service-wrapper1
{
    display:inline-block;
    width:20%;
}

here is fiddle

Answer 7

的CSS：

#include <stdio.h>
#include <stdlib.h>
#include <string.h>
int main ( void ) {
  char* line=NULL;
  int len;
  int lv = 1;
  for(;;) { 
    printf("Level: %d\n", lv);

    getline(&line, (size_t*)&len, stdin);

    if (line[strlen(line) - 1] == '\n') {
      line[strlen(line) - 1] = '\0';
    }
    if (strcmp(line, "cl")==0) {
      lv = 3;
    } else if (strcmp(line, "hi")==0) {
      printf("Hello World!\n");
    } else if (strcmp(line, "quit")==0) {
      break;
    }
  }
  return 0; 
}

HTML：

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after { clear: both; }
.rowtitle ul li { float: left; }

Answer 8

使用display:table和display:table-cell将解决您的问题：

.rowtitle ul {
  display: table;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#rowtitle ul li {
  display: inline;
}
#rowtitle ul li a {
  text-decoration: none;
}

<div class="rowtitle">
  <ul>
    <li style="display: table-cell; padding: 0 10px;">
      <div class="service-wrapper1">
        <a href="#">
          <div class="wrappername">first_block_text;</div>
        </a>
      </div>
    </li>
    <li style="display: table-cell; padding: 0 10px;">
      <div class="service-wrapper1">
        <a href="#">
          <div class="wrappername">second_block_text;</div>
        </a>
      </div>
    </li>
    <li style="display: table-cell; padding: 0 10px;">
      <div class="service-wrapper1">
        <a href="#">
          <div class="wrappername">third_block_text;</div>
        </a>
      </div>
    </li>
  </ul>
</div>

希望它有所帮助。

在css中创建水平列表

8 个答案: