Question

我正在尝试在语义ui中将搜索框居中。栏居中，但搜索结果未居中。我尝试对输入的div输入居中对齐类，但没有成功这是我的代码和我的js fiddle link：

var categoryContent = [{
    category: 'Language',
    title: 'Python'
  },
  {
    category: 'Language',
    title: 'Java'
  },
];

$('.ui.search')
  .search({
    type: 'category',
    source: categoryContent
  });

body {
  background-color: #F2EDF3;
}

.search-bar {
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
</head>

<body>
  <div class="ui grid center aligned">
    <div class="sixteen wide column">
      <div class="ui category search ">
        <div class="ui icon input search-bar">
          <input class="prompt" type="text" placeholder="looking for...">
          <i class="search icon"></i>
        </div>
        <div class="results"></div>
      </div>
    </div>
  </div>

</body>

</html>

Answer 1

您的问题是，因为显示结果的元素具有绝对位置的css属性。与左：0组合在一起，将始终将元素放在左侧。

将其重置（通过将其设置为继承），然后将内容居中放置在空白处：0自动；所有工作均按预期进行。 Here is an example fiddle

.results.visible{
   margin: 0 auto;
   position: inherit;
}

如果不起作用，请使用更具识别性的CSS，它将覆盖所有其他样式。但是请注意，如果html与显示的内容或css有所不同，这将无法正常工作。这取决于“击败”现有规则，该规则通过从同一个父对象开始然后对其进行更具体的定义（使用.visible引用附加类）来强制绝对定位。

.ui.search > .results.visible {
  position: relative;
  margin: 0 auto;
}

如果不起作用，请使用！important，这通常不是一个好习惯（因为它会破坏CSS规则的正常运行，并可能在将来引起样式问题），但是如果您找不到合适的标识符，这可能会起作用。

.results.visible{
   margin: 0 auto !important;
   position: inherit !important;
}

您可以尝试使用此fiddle

Answer 2

.results具有position：absolute和left：0，并且其父级具有相对位置，并且它是100％，因此.results偏向左侧是正常的，因为那是position absolute在内部位置relative内的工作方式

因此，与使用任何框架一样，您必须覆盖内容。不要使用！important，因为这是一种不好的做法，而是使用CSS“ specificity”

因此您可以这样做：

.ui.search > .search-bar + .results {
  position: relative;
  margin: 0 auto;
}

https://jsfiddle.net/xwftdv2h/7/

Answer 3

请尝试以下代码。我检查了它应该可以工作。

.ui.category.search .results.visible {
    display: inline-block !important;
    width: 50% !important;
    position: unset !important;
}

输出：

语义ui中居中搜索框

3 个答案: